There’s only one thing on the net cooler than Google™ Maps. What could possible be cooler than that?
Putting an interactive map on your own website.
Google™ has released the API for their mapping system, so now you can develop websites using their maps. And it’s much easier than you may think!
The possibilites are endless. So far I’ve seen it used for placing pins on a satelite map to point out users caught a fish. Clicking the pin brings up the famous little bubble, complete with info on the bait used, conditions, etc. Some police stations are also using it show where crimes occured recently on their websites. I’ve been using it on my site to track car meets and give directions.
Enough with the Jabber! Let’s get on to how it’s done!
1) I’ve attatched a javascript file that is necessary for this code to work – download it, extract the zip, and then upload it to your site’s home directory. I’ll explain why I’m having you download this instead of linking to the existing one later.
2) Request a free key for the Google™ Maps API here.
3-a) Add the following code to the page you want the map to be on. If you are using Drupal or another CMS, follow step 3-b instead!
<zcript
src="http://maps.google.com/maps?file=api&v=1&key=abcdefg"
type="text/javascript">
<zcript
src="gmapez.js"
type="text/javascript"></zcript
</zcript
Notice: I used Z instead of S in the word script so it would post here. When you add the code, make sure to replace the Z with S!
The code needs to go on the BOTTOM of the page before the body close tag (after your last div) so the HTML is parsed before the javascript file is called. Not doing this will cause your site to be unviewable in IE and other browsers.
3-b)For Drupal or other CMS’s that use a template system: Add the above code to the bottom of your page.tpl (or whatever your main page template file is).
NOTE: In Drupal you MUST have clean URLs turned OFF. Since the API key is only for one directory, clean URLs cause an error message on all but the registered URL. With clearn URLs off, all your pages work perfectly. Hopefully Google™ addresses this issue in the future.
4) To insert a map on your page, check out http://bluweb.com/us/chouser/gmapez/docs.html for quick code snippets. Only use the main code – don’t worry about the first block that shows the javascript – we’ve already taken care of this. I had you download the file rather than link to theirs so your site will continue working should that site go down, be moved, etc.
5) All done. Easy as pie!
Let me know if you have any questions!
| Attachment | Size |
|---|---|
| gmapez.zip | 2.37 KB |
