All about Google Maps

This page has a set of step by step instructions on how to create you own Google Maps from your GPS tracks so that you can place them directly into your web pages.  When I first tried to do this in 2006, I had lots of problems.  There are instructions at Google and gpsvisualiser, however there are some tricks and traps. This page will help you avoid those traps.

Get your Google API key for your website

The first thing to do is get yourself an API key from Google.  It is free and easy, but there are a couple of tricks.  Firstly you need to know that the API key will only work on the domain (and sub domains) that it was generate for.  A key created for voipstuff.net.au/gps will not work for voipstuff.net.au/excel.  However a key generated for voipstuff.net.au will work for both of these sites.  See the following table for an illustration. The API key created for the URL listed down the page will only work on some URL domains (listed across the table).

		Hosted Web Page
		voipstuff.net.au	matt.voipstuff.net.au	matt.voipstuff.net.au/gps
API Key	voipstuff.net.au	Yes	Yes	Yes
	matt.voipstuff.net.au	No	Yes	Yes
	matt.voipstuff.net.au/gps	No	No	Yes

The best thing to do thefore is to generate the API key for the highest level domain that you will be using.  In my case, I have generated the key for voipstuff.net.au and it works on all of my web pages.

Secondly, be aware that the key you generate will always be the same for the same URL.  So if you forget your key, just go and generate it again - you will get the same key.  To generate your API key, go to the Google API website at http://www.google.com/apis/maps/ and click on the link .  


You will need to enter your URL in the space provided, agree to the terms and conditions of use, and then click on the button to generate your API key.


You will then be taken to a page that will give you your API key.  You can always get back to this page by completing this process again.

Test your API key on your website

Now that you have your API Key and sample php code, you should create your first HTML page and test that everything is working OK.  To do this, copy the sample HTML code and paste it into a new text document (using notepad.exe is fine).  

Save the file as test.html from within notepad (make sure you set SAVE AS TYPE to ALL FILES).  If the file is saved with a *.txt extension, you can just change the file name to test.html using Windows Explorer.   Load your test page onto your web server an test it out (details on how to do this will be coming later). Assuming that this page displays OK, then you have confirmed that your API key is working and you are well on the way to embedding your own Google Maps into your web pages.

Convert your track log using GPS Visualizer

The next step is to convert one of your track logs to the Google Maps format using GPS Visualizer.
1. Go to http://www.gpsvisualizer.com/map?form=google

Keep all the default settings for your first map.  You can play around with these settings later.
2. Cick on the browse button to load your GPS track into GPS Visualizer.  You can load upto 3 files into the one map. You can load most GPS file types, however if you have trouble loading your file type, you can use GPS Babel to convert your track log first.  
3. Click on the "Draw the Map" button.  You will see something similar to the following page.

Notice the link at the top of the page titled "save your Google Map".  Click on this link to bring up a page that just contains your map (without all the other GPS Visualizer information).
4. When the new page opens, you need to access the source HTML code.  In Internet Explorer, click on View\Source to access the source HTML code.

By default, the HTML code will be displayed in Notepad.  Save the file on your PC so you can find it.  Call it sample.html
5.  Once you have saved the file to your PC, open the file in your web browser to check that it works.  You may be prompted with a warning message that there is a Java Script about to run.  Don't worry, just click to allow the script to load.
6.  Now if you were to simply load this page onto your website now, it wouldn't work.  You need to change the API key in the file first.

Copy your API Key into the sample.html

1. Copy your API key you got from Google.
2. Find the key= tag in the file sample.html


3. Replace the entire key between the equals sign and the inverted comma (as above) with your website API key
4. Save the file, load it onto your website and that's it.

Final Product

If you have done everything correctly, you should have something like this. What's cool about Google Maps is you can zoom in and out, scroll around, and flip between map, satelite and hybrid views.