Google Maps API Tutorial

© 2006, 2007, 2008, 2009, 2010, 2016 Mike Williams

 
Translate this page:

 

Google Maps API Tutorial

This 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:

  1. Read it and try to understand the principles involved.
  2. Use the example files as templates. Paste the code into your own web page and change the API key and data. Read the "potential pitfalls" sections, and try to avoid them.
Using the Google Map API is not easy if you don't have much Javascript experience.
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 New

What's New Recent changes to the tutorial.

Instant Maps

Part 1 Making instant maps with the Google Wizard
Part 2 Making instant maps by embedding maps.google.com

The Basics

Part 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 stuff

Part 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 Stuff

Car 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 Maps

Part 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 Extensions

List 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

Compatibility

APIv2 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 Concepts

Some 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?

Resources

Unofficial 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 solving

When 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 help

There's lots more info at the Mapki

You 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.

Back to Mike's Homepage