Google Maps API Tutorial© 2006, 2007, 2008, 2009, 2010, 2016 Mike Williams |
| Translate this page: |
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. What's NewWhat's New Recent changes to the tutorial.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 infowindows 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 different languages Part 23 Underlay message Part 24 Google Chrome Considerations 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 Context menus for overlays Part 30 Custom direction details Part 31 Geocoding Low Quality Data Part 32 Custom Cursors Part 33 Storing user input Part 34 Dealing with Modularized Overlays and Controls Part 35 GoogleBar Options. Part 36 Using cookies to remember the map state. Part 37 Tricks with GGeoXml Part 38 Using pseudo-HTML data files for maxContent Part 39 Communicating between iframes Part 40 Using <CANVAS> Part 41 Icon Sprites Part 42 GLayers Part 43 Altitude Part 44 Geocoding UK Postcodes Fun StuffCar Trip Using the Google directions for an animated drive.Car Trip 2 Same trip with polyline that grows as the car moves. Car Trip 3 Using <canvas> to rotate the icon (HTML5 capable browsers only) Custom MapsPart 1 Adding your own custom map.Part 2 Flat Maps and Diagrams: Custom GProjection. Part 3 Alternative map type controls. Part 4 Browser Connection Limits. Third Party ExtensionsList A list of all third part extensions that I know about.Part 1 Using Jef Poskanzer's Clusterer 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 EPoly version 2 - the same but faster. Part 14 Using EBubbles - another alternative to the API info window Part 15 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 Applications Book Beginning Google Maps Applications with PHP and Ajax The Mashup Book Beginning Google Maps Mashups with Mapplets, KML, and GeoRSS How It Works Looking inside the Dynamic HTML How GLayers Work Looking inside the GLayer code 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 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.
|
