Creating your own customized Google Maps
Google Maps is very cool - lots of info and easy to manipulate. What's even cooler is that you can add your own custom info to a Google map like I did on this page.
This page tells you how to do it.
If you find anything here to be confusing, incomplete, or wrong, please don't hesitate to email me: DLChambers@aol.com
Note: All the links on this page open new windows. If you have a popup blocker active you'll want to disable it for this page.
Skillset
You must be proficient (though not expert) in:
- HTML - of course...
- JavaScript - The Google Maps API is done in JavaScript.
And, if you want to make more powerful, flexible maps, you'll need to know
- XML - for storing your custom map data. You'll also need to know the XML DOM in order to use the data in your page.
Tools
At a minimum, you'll need:
- FireFox - Developing and debugging JavaScript in IE is impossible. Download & install FireFox from here then install their JavaScript debugger extension known as Venkman
- An Editor - to write your HTML and JavaScript. A programming-oriented editor is preferable, but Notepad will do in a pinch. Do not use a wordprocessor such as Microsoft Word - it's HTML output is so bloated with incomprehensible crap that you'll never find your code!
- Google Maps API key - You must sign up (accept a EULA), and they issue you a key (unique string) that allows their maps to work on your page. Note that each key works for a certain directory, so if you want to put one map on
www.mysite.com/dir1/dir1.html and another on www.mysite.com/dir2/dir2.html (or www.mysite.com/dir1/dir2/dir2.html) you'll need to get two keys - one for dir1.html and a 2nd key for dir2.html. This isn't a big deal - obtaining additional keys is dead simple - you just need to be aware of the restriction.
- Google Maps API docs - are here.
- Google Maps Polyline Utility - the web-based tool to create the lines, available here. It's not ideal (map too small, search doesn't work) but it gets you started.
And to complete toyur toolkit, you'll probably want:
- A transparent GIF editor - If you want to display custom images on your map, you'll probably want to use transparent GIFs. Non-transparent images (meaning, everything except transparent GIFs) can only be rectangular like
. Transparency allows you to create images that look like 
. I've been using an online tool named GIFWorks; look fo the Add Transparency item in the Edit menu.
- An XML editor - You can use your text editor, or give MS XML Notepad a try.
And, if you're chasing historical railroads in the Northeast, you should check out the Maptech Historical maps page - tons of great info from the past hundred years.
Enough talk, let's do it!
The Google Maps examples are pretty good, so take a look at them.
However, I did find the examples take a number of leaps of faith - they sometimes forget that the reader is new to the technology. I'll add notes here soon...
-Dave