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 Wizard
Part 2 Making instant maps by embedding maps.google.com
The BasicsPart 1 Markers with info windows
Part 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 sidebar
Part 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.
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
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 Mapki
You can search the Google Group for similar problems