How to add a Google Map to any web page in less than 10 minutes

Most people really like the embedded Google Maps, but don't know how easy it is to add them to any page. I've had a few people ask me how it is done. With a little bit of HTML knowledge, anyone can quickly have a map up and running in just a few minutes. Here is […]
Most people really like the embedded Google Maps, but don't know how easy it is to add them to any page. I've had a few people ask me how it is done. With a little bit of HTML knowledge, anyone can quickly have a map up and running in just a few minutes.

Here is an example of how you can add a map to any contact us page or blog quickly and easily.

First you need a Google Maps API key, which is free. You can find it, along with other documentation, at http://www.google.com/apis/maps/. Bookmark this link - it has lots of details you might want, especially if you extend your new map beyond this example.

Follow the instructions to "Sign up for a google API key". You'll need a gmail account, and to enter your domain name. This key can then only be used on pages served from that domain name. If you are going to develop on a different server, then you might want to get 2 keys - one for your development server, and then one to switch over to when you publish it to your site. (In Exploration Age, we have several keys that are automatically selected based on which environment the code is running in)

Along with your key, Google will give you a bit of starter code. For the time being, ignore the google code. As of this writing, their code is for version 1 of the API, while the documentation at http://maps.google.com/apis/maps/documentation/ is for version 2. The code here will show you how to implement v2 of the api, which is better. After copying your new key, start with the following code. (note some lines that shouldn't be wrapped like they are here due to space limitations. Make sure your SCRIPT tags are all on one line.)

<notextile>&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
    &lt;script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=
[YOURKEY]&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload=&quot;showMap();&quot; onunload=&quot;GUnload()&quot;&gt;
   &lt;script type=&quot;text/javascript&quot;&gt;
    //&lt;![CDATA[
    function showMap()
        {
        if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById(&quot;map&quot;));
	map.addControl(new GSmallMapControl());	
        map.setCenter(new GLatLng(31.95216223802497, -7.71875), 1);
          }
        }
    //]]&gt;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</notextile>


You'll have a different key string in the SCRIPT tag, generated by Google to match your domain name. In order to add a map to your site, all you have to do is cut and paste the right pieces of code from this example. First off,

<notextile>    &lt;script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=
[YOURKEY]&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</notextile>


This script include does 2 things. First, it links in the javascript you need to run the map, and second, it let's Google know who you are with the embedded key. Add this SCRIPT tag somewhere on your page (above the other code below.)

Next, you'll see this div:

<notextile>&lt;div id=&quot;map&quot; style=&quot;width: 500px; height: 400px&quot;&gt;&lt;/div&gt;</notextile>


This is actually where the map will appear on the screen. Put this div wherever on your page you want the map to show up. Be sure to update the width and height styles to match how big of a map you want on the page. Finally, you see this javascript:

<notextile> &lt;script type=&quot;text/javascript&quot;&gt;
    //&lt;![CDATA[
    function showMap()
        {
        if (GBrowserIsCompatible()) {
	var map = new GMap2(document.getElementById(&quot;map&quot;));
	map.addControl(new GSmallMapControl());	
        map.setCenter(new GLatLng(31.95216223802497, -7.71875), 1);
          }
        }
    //]]&gt;
    &lt;/script&gt;</notextile>


This is the code that actually draws the map. Place this in your XHTML anywhere after the map DIV. The first line instantiates the map and assigns it to the map div. The second line adds the little pan and zoom controls. Finally, the third line centers the map on a point and sets the zoom level.

Be sure to add the onload and unload functions to the body tag as shown above - these start the map loading process, and help stop Internet Explorer from crashing, and avoid some nasty memory leaks.

<notextile>  &lt;body onload=&quot;showMap();&quot; onunload=&quot;GUnload()&quot;&gt;</notextile>


Now you'll have a map, but it's pointing at the Google headquarters in Palo Alto! How do we get coordinates and point the map at where we want? Even better, how do we get one of those little Pins on the map?



Piece of cake. First, you need to find the latitude and longitude of the place you want on the map. We'll use Google. Go to http://maps.google.com and use the pan, zoom and search functions to find what you want to link to. Once you've found it, double click right on the spot to center the map there. Finally, click on "link to this page", and take a close look at the URL. When I look at Powell Butte Park, I get this url

http://maps.google.com/?ll=45.484206,-122.499447&spn=0.031833,0.069523

Luckily for us, it contains the latitude and longitude (see the ll=45.48... line? That is the coordinates). Now, we just have to enter those coordinates in our script to get our map centered on the same spot. Modify the map.centerAndZoom line with your new coords. Like so:

<notextile>    map.setCenter(new GLatLng(45.484206,-122.499447), 14;</notextile>


Now your map will point at the new coordinate. Also, you can play around with the last number (13) to change the zoom level, try 14 like the example above.



Finally, we can add a point by adding one line of javascript right after the map.centerAndZoom command.

<notextile>	map.addOverlay(new GMarker(new GLatLng(45.484206,-122.499447)));</notextile>


Notice we use the same coordinates as the map.centerAndZoom command.



Voila!! You have your very own, fully interactive Google map. If you want to get fancy, study the API documentation to learn about the other features already built in. Check out Exploration Age for ideas - you can see how we added custom icons and multiple points.