Google Maps API Tutorial

location based services

The old Version 1 information is still available.

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:

Read it and try to understand the principles involved.
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.

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.


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.
Known bug list A list of the API v2 bugs that I know about.

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

More advanced stuff
Part 1 Sidebar mouseovers: Changing icons when the mouse hovers over the sidebar
Part 2 Memory leak considerations
Part 3 International Date Line considerations.
Part 4 Opening info windows when the mouse hovers over a marker
Part 5 Dual Maps: A pair of maps that match each other's movements.
Part 6 Adding Standard tooltips to your markers. new in v2.50
Part 7 Adding Custom tooltips to your markers.
Part 8 Adding Custom tooltips to your markers, method 2.
Part 9 Restricting the range of map zooms and pans.
Part 10 Calculating the straight line distance and bearing direction between two points.
Part 11 Making your own custom markers.
Part 12 Making your own custom events.
Part 13 Using GIcon.label.
Part 14 Using GControlPosition
Part 15 Maps with colour tones
Part 16 Polylines with arrowheads

Custom Maps
Part 1 Adding your own custom map.
Part 2 A custom map without a server script.
Part 3 Flat Maps and Diagrams: Custom GProjection.
Part 4 Custom Map copyright collections.

Third Party Extensions
List A list of all third part extensions for APIv2 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
Part 6 Animated markers
Part 7 Using EInserts
Part 8 Using EWindows

Whacky Ideas
Part 1 Legal ideas
Part 2 Illegal ideas
Part 3 Coloured Info Windows but not in IE

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, generally at a slightly more advanced level, 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.


Business For Life Charity
This tutorial is provided by the Blackpool Community Church Javascript Team.
If you found 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.