Google Maps API Tutorial

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