Google Maps API Tutorial© 2006, 2007 Mike Williams |
Google Maps API TutorialThis tutorial is intended to help you create your own interactive maps using the Google API.Do take a look at the Google documentation. There are two ways to use this tutorial:
If you find the Google documentation too difficult to understand, it's not because it's badly written it's just that the subject is not easy.
Business For Life CharityThis tutorial is provided by the Blackpool Community Church Javascript Team.If you find this tutorial useful, you might consider making a donation to the Blackpool Community Church Business For Life Charity, which helps people in third world countries to help themselves by providing an individual with a grant to start up their own business. Paypal and credit card donations accepted. Instant MapsPart 1 Making instant maps with the Google WizardPart 2 Making instant maps by embedding maps.google.com The BasicsPart 1 Markers with info windowsPart 2 Adding a clickable sidebar Part 3 Loading the data from an XML file Part 4 Getting directions Part 5 Onload functions and external controls Part 6 Images and Links in info windows Part 7 Loading polyline data from an XML file Part 8 Maps in articles Part 9 Loading the data from a plain text data file Part 10 Tabbed Info WIndows Part 11 The AJAX Philosophy Part 12 Loading data from a JSON file Part 13 Using GOverviewMapControl() Part 14 Fitting the map zoom to the data Part 15 Lots of sidebar entries Part 16 Associative arrays and custom icons Part 17 Google Earth icons Part 18 Sending KML files to Google Maps Part 19 Using KML files within API pages Part 20 Using a percentage height for the map div Part 21 Using GMarkerManager to manage large numbers of markers Part 22 Using googlepages.com Part 23 Using different languages Part 24 Underlay message More advanced stuffPart 1 Sidebar mouseovers: Changing icons when the mouse hovers over the sidebarPart 2 Opening info windows when the mouse hovers over a marker Part 3 Dual Maps: A pair of maps that match each other's movements. Part 4 Adding Standard tooltips to your markers. Part 5 Adding Custom tooltips to your markers. Part 6 Adding Custom tooltips to your markers, method 2. Part 7 Restricting the range of map zooms and pans. Part 8 Calculating the straight line distance and bearing direction between two points. Part 9 Making your own custom markers. Part 10 Making your own custom events. Part 11 Using GIcon.label. Part 12 Using GControlPosition Part 13 Maps with colour tones Part 14 Maps with colour tones - new method + See also this other method in the Official Blog Part 15 Polylines with arrowheads Part 16 Geocoding with error handling Part 17 Geocoding multiple addresses Part 18 Fixing the 'inherited CSS' problem Part 20 Passing and receiving parameters Part 21 Setting the z-index of markers Part 22 Testing if a polygon contains a point Part 23 Geocoding: Asking "Did You Mean?" Part 24 A Custom Zoom Slider Part 25 Marker Categories Part 26 Get directions on your own map Part 27 Snap point to the nearest street Part 28 Context menus Part 29 Custom direction details Part 30 Geocoding Low Quality Data Part 31 Custom Cursors Part 32 Storing user input Part 33 Tweaking GOverviewMapControl in v2.93 Part 34 Recording mileage within each US state. Part 35 GoogleBar Options. Part 35 Using cookies to remember the map state. Part 36 Tricks with GGeoXml Part 37 Using pseudo-HTML data files for maxContent Fun StuffCar Trip Using the Google directions for an animated drive.Custom MapsPart 1 Adding your own custom map.Part 2 Flat Maps and Diagrams: Custom GProjection. Part 3 Alternative map type controls. Third Party ExtensionsList A list of all third part extensions that I know about.Part 1 Using Jef Poskanzer's Clusterer Part 2 A simple example using Tom Mangan's TLabel extension Part 3 Using Tom Mangan's TLabel extension as markers Part 4 Using Jef Poskanzer's OverlayMessage Part 5 Using ELabels - custom overlay labels. Part 6 Animated markers in versions prior to API v2.59 Part 7 Using EInserts - custom overlay images that scale with the zoom level Part 8 Using Draggable EInserts - helps position EInserts during development. Part 9 Using EInsert.groundOverlay() Part 10 Using EWindows - an alternative to the API info window Part 11 Using EGeoXml - taking control of KML file rendering. Part 12 Using EPoly - extra methods for polygons and polylines. Part 13 Using EBubbles - another alternative to the API info window Part 14 Using EShapes - draws standard shapes CompatibilityAPIv2 supports the old v1 documented commands (except openInfoWindowXslt) as well as the new v2 syntax.If you already have a working v1 map that doesn't use any undocumented features, then you can just change the version number when you load the API code and it may well work the same. One significant source of incompatibility is that you must perform a map.setCenter() before adding any overlays. Javascript ConceptsSome oddities about the Javascript language that might possibly catch you out if you're familiar with other programming languages.Part 1 Scope Part 2 Asynchronous I/O Part 3 Function Closure Part 4 Call by Reference or Call by Value?
ResourcesUnofficial API 2 Reference Details of everything accessible in version 2.Events API events, Custom events and DOM events. Recommended Tools Tools to help you develop your map web page. The Book Beginning Google Maps Applications with PHP and Ajax How It Works Looking inside the Dynamic HTML Problem solvingWhen your page doesn't work, the first thing to do is look to see if there are any Javascript errors reported.In Firefox, launch the "Javascript Console" from the "Tools" menu. In IE, double-click on the error icon in the status bar. The error messages can often provide clues to what's gone wrong Don't forget to check the "potential pitfalls" associated with each of these tutorial sections. Getting helpThere's lots more info, generally at a slightly more advanced level, at the MapkiYou can search the Google Group for similar problems You can also ask for help there but if you do, please post a link to your page where you're having problems, that will vastly increase your chances of getting useful assistance. Avoid posting large chunks of Javascript code to the group, links to web pages are much preferred, since we can immediately run our Javascript debugging tools on them.
|
