How to Add a Google Map to Any Web Page in Less than 10 Minutes

Joshua Siler's Invaluable How-To Guide

Mar. 15, 2006 11:45 AM

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 that looks something like this. (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.)

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script src="http://maps.google.com/maps?file=api&v=1&key=
[YOURKEY]" type="text/javascript"></script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 400px"></div>
    <script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
    
    //]]>
    </script>
  </body>
</html>

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 the Google example. First off,

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

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:

<div id="map" style="width: 500px; height: 400px"></div>

This is actually where the map will appear on the screen. Put this div whereever 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:

<script type="text/javascript">
    //<![CDATA[
    
    var map = new GMap(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
    
    //]]>
    </script>

Google's code is a little flaky in Internet Explorer, so make this quick modification to the code so it will work better. Essentially, it allows everything to load before trying to draw the map (and might save you some IE crashes)

<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>

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. 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:

    map.centerAndZoom(new GPoint(-122.499447, 45.484206), 8);

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

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

	map.addOverlay(new GMarker(new GPoint(-122.499447, 45.484206)));

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

Viola!! 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.

[This how-to guide appeared originally at the Exploration Age web site. Republished by kind permission of Joshua Siler and Kinetic Theory, Inc., http://kinetictheoryinc.com]

About Joshua Siler
Joshua Siler is Partner/Strategic Director of Kinetic Theory, an agency specializing in Interactive Web Development, Site and Interface Design, and Strategic Marketing. (www.kinetictheoryinc.com)

Enterprise Open Source Magazine Latest Stories . . .

Deltacloud Graduates to TLP

By Maureen O'Gara

Apache Deltacloud, the Red Hat-contributed ReSTful API that abstracts differences between clouds so services on any cloud can be managed – provided of course there’s a driver – has graduated from the Apache Foundation’s incubator and is now a full-fledged Top-Level Project (TLP). The...

Cloud Expo New York Speaker Profile: Mark Hinkle – Citrix Systems

By Jeremy Geelan

With Cloud Expo 2012 New York (10th Cloud Expo) just four months away, what better time to start introducing you in greater detail to the distinguished individuals in our incredible Speaker Faculty for the technical and strategy sessions at the conference... We have technical and st...

AMD Sales Chief Out

By Maureen O'Gara

AMD said late Tuesday that its chief sales officer Emilio Ghilardi had left the company and that CEO and president Rory Read is going to do his job while a replacement is sought. AMD didn’t say why Ghilardi left but it’s assumed Read wants his own people. Read is relatively new to th...

M3 Timers – Improved Server Monitoring

By Hovhannes Avoyan

During the lifespan of M3 (Monitis Monitor Manager) there has always been something lacking – timers. M3 execution procedure was outlined in this previous article. The execution mentioned in the latter was a one-time-execution, whereas server monitoring requires periodic invocati...

Red Hat Puts Gluster Appliance on Amazon

By Maureen O'Gara

Red Hat is putting its bought-in Gluster scale-out NAS storage technology, acquired in October, on the Amazon cloud. It’s styled Red Hat Virtual Storage Appliance for Amazon Web Services and other clouds are supposed to follow in short order.

The New OpenNebula Self-Service Portal in Action

By Ignacio M. Llorente

A new episode of the screencast series is now available at the OpenNebula YouTube Channel. This screencast demonstrates the new easily-customizable self-service portal for cloud consumers. Its aim is to offer a simplified access to shared infrastructure for non-IT end users. The scree...