1) Go to the Google Maps API page and request a free API Key. You’ll get the key and some sample code. It’s good for all pages under one domain. Keep this open and/or save the page content.

2) Open the HTML page for the map, and copy the linked JavaScript from the sample code into the document head. This is the first SCRIPT tag.

3) Copy the load() function from the sample code into the HTML page or into an externally linked JavaScript file. This is in the second SCRIPT tag.

4) Call the load() function in the body onload event, and the GUnload() function in the body unload event.

5) Replace the longitude and latitude values in the load() function with the values of your location on your map (these are the two numbers after “GLatLng”). You can find the longitude and latitude of your location. Here are some sites to help with this:

• GeoCoder
• Maporama
• Find the location in Google Maps, the run this code from the browser’s location bar (paste and hit Enter or Go): javascript:void(prompt(”,gApplication.getMap().getCenter()));

6) One way or another, be sure to have alternative content (such as a static map) when JavaScript is not available on the client side (browser). A popular method is the NOSCRIPT tag.

You’re done! check out this Google Map example on this salon web site that I did. Go to the Google Map documentation for more details.

Be Sociable, Share!

•