How To: Add Google Map to your website

Source:

1)Get Google Maps API key, which is free at http://www.google.com/apis/maps/.

2)Follow the instructions to "Sign up for a google API key". You'll need a gmail account, and to enter your domain name. If you need an invite, just comment to this blog entry with an email address. I'll delete the comment afterward.

3)Get the google script to help you:

<script src="http://maps.google.com/maps?file=api&v=1&key= [YOURKEY]" type="text/javascript"></script>


<div id="map" style="WIDTH: 500px; HEIGHT: 400px">
</div>
<script type="text/javascript">
//<![CDATA[
window.onload = showMap;
function showMap()
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
//]]>
</script>

In the CDATA the first two lines tells IE to wait before loading all the images.

"The [third] line instantiates the map and assigns it to the map div. The [fourth] line adds the little pan and zoom controls. Finally, the [fifth] line centers the map on a point and sets the zoom level."

4)Change the values to your default map:
Ex:
http://maps.google.com/?ll=45.484206,-122.499447&spn=0.031833,0.069523
then change: map.centerAndZoom(new GPoint(-122.499447, 45.484206), 8);
the last number is the zoom level.

5) To add a point just add the following javascript:
map.addOverlay(new GMarker(new GPoint(-122.499447, 45.484206)));


I like this simple tutorial, I see how I can write a php or perl script to make my site somewhat interactive. Of course I would also need to read up more on google api when I get a chance, so I could connect the dots, etc....