Simple Instructions for Google Map on Web Page
So you want to embed an interactive Google Map on your web page? Here are the basic steps/instructions to do so.
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.
Follow me on Twitter!
Thank you very much for your simple instructions here. I have a basic map working on my prototype site – but just noticed the Google Javascript killed my Nifty Corners script and the 4 corners of my canvas are no longer round. Is there a smart way to combine Javascripts on a single page?
Thank you.
Liz M
Liz, sounds like you may have conflicting onLoad events (calling it twice). If so, try calling them from one onLoad function; best to use the addLoadEvent function. Good luck and have fun!
Hi Dennis,
Great article. I have implemented the map, but am having trouble understanding how to place the little red marker over the actual address, like you did on the Salon website. Can you give me an idea how to do that? Thanks,
Dave Z.
David, I used a function called “openInfoWindowHtml”. There’s great help in the Google Map documentation link at the end of the post. On that page, go to the section Display Info Windows Above Markers.
I’m having the same problem as Liz. In IE6 Nifty Corners fails to work once I add the following:-
It works fine in FFox. With IE I get an “Error: Object Expected”.