How to Embed Google Maps into Your Web Pages

Simple Step-by-Step Instructions

Step 1: Sign up for a Google Maps API Key

Sign up for a Google Maps API key here. You will need a different API key for each directory on your web server. This means that if two web pages are in different web folders (directories) on your web server, then you will need separate Google Maps API keys for both web pages. For instance, if you sign up for the URL http://www.mygooglemapssite.com/mysite, the key you get will be good for all URLs in the http://www.mygooglemapssite.com/mysite/ directory.

Step 2: Build a Simple Google Map

Save the example code below to a separate web page. To effectively embed the Google Map into the web page, replace abcdefg (shown in bold below) with your API key. Be sure that you upload the file into the same directory that you specified when signing up for the Google Maps API key in Step 1. If you did not specify a sub-directory, then the file should go into your root (main) html folder (e.g. http://www.mygooglemapssite.com/ ).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Step 3: Modify the Simple Google Map

You most likely want a different map location than the Palo Alto, California location specified by the coordinates in the map code above. You may also want to add a marker icon and an info window to your map. We've done these things in the map shown below. We've also added directional and zoom controls as well as map type controls (to change to satellite view). Underneath our embedded Google map display is our map code followed by a list of our modifications to the simple Google Map example code shown above. We show you the specific lines that we've added or modified. Be sure to study the code to understand how each feature was added to the embedded Google Map code. Once again, you'll need to replace abcdefg (shown in bold below) with your Google Maps API key.

Below is the code for the map above (minus our building image). To include your own image in a map's info window, just add the image code as you normally would in html by using img tags
(e.g. <img src="path/to/image.jpg" align="left"> ).

*NOTE: When copying and pasting the example below, the following WINDOW_HTML variable code needs to be put entirely on one line.

var WINDOW_HTML = '<div style="width: 210px;
padding-right: 10px"><a href="http://www.hostrocket.com">
HostRocket</a> servers are located at
21 Corporate Drive, Clifton Park, NY 12065.
Phone: 1-866-519-7079</div>';

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
	
    var WINDOW_HTML = '<div style="width: 210px; 
	padding-right: 10px"><a href="http://www.hostrocket.com">
	HostRocket</a> servers are located at 
	21 Corporate Drive, Clifton Park, NY 12065. 
	Phone: 1-866-519-7079</div>';	
	
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(42.8487, -73.755), 13);
	var marker = new GMarker(new GLatLng(42.8487, -73.755));
	map.addOverlay(marker);
	GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(WINDOW_HTML);
	  });
	marker.openInfoWindowHtml(WINDOW_HTML);			
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

Change the Location
To change the map location, you'll need to modify the coordinates (latitude, longitude) in the Google map code above. Look at the line:

map.setCenter(new GLatLng(42.8487, -73.755), 13);

Notice our new coordinates 42.8487, -73.755 which is the location of the SearchEngineKnowledge servers at HostRocket's facility in Clifton Park, NY. The number 13 after the map coordinates represents the zoom level, which ranges from 0-17 (where 17 is the closest level of zoom). To get the coordinates of your location, open up the Google Maps web site and search an address. On the resulting page, click the 'Link to this page' link near the top right (next to the email link). Now study the url address in your browser window. Look for something similar to ll=40.25635,-79.794675 (where ll stands for latitude and longitude). Copy the latitude and longitude values into your map code.
Map Zoom Controls
To add zoom and directional controls to your embedded Google map, you'll need to add the following line to your code (Refer to the map code example above to see where to add this new line of map code):

map.addControl(new GSmallMapControl());
Map Type Controls
To add the Map, Satellite and Hybrid buttons, include the line of code shown below:

map.addControl(new GMapTypeControl());
Add a Map Marker
To add a Google map marker (the upside down red water drop) to your map, include the following two lines of code with the marker coordinates specified. *Note: Your marker coordinates may likely be close to or the same as your location coordinates.

var marker = new GMarker(new GLatLng(42.8487, -73.755));
map.addOverlay(marker);
Add an Information Window
Map info windows help to describe your location, and in this case the info window will appear as a shadowed speech bubble over your map marker. To add a Google Map info window, you'll have to do the following two steps after you've included the code for the map marker (above):
1. Assign the Info Window Code to a Variable
  You'll need to assign the code that you want displayed in the info window to a JavaScript variable, as we've done below. You can include images, text, etc in the code. For example, you could show a company logo or a building photo in the info window to represent a company's headquarters.
  
  (*NOTE: To get the map to work correctly, put the code below entirely on one line.)
  
  var WINDOW_HTML = '<div style="width: 210px;
  padding-right: 10px"><a href="http://www.hostrocket.com">
  HostRocket</a> servers are located at
  21 Corporate Drive, Clifton Park, NY 12065.
  Phone: 1-866-519-7079</div>';
2. Add Code to Display the Info Window Variable (set in step 1)
  To display the variable WINDOW_HTML that we set in step 1, put the code below into your embedded Google Map as we've done in the modified map code shown earlier.
  
  GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(WINDOW_HTML);
  });
  marker.openInfoWindowHtml(WINDOW_HTML);
  
  If you want the info window to appear only when a user clicks on the map marker, then insert the code below instead.
  
  GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(WINDOW_HTML);
  });

After implementing the three steps above, it will be easy for you to embed Google Maps into your web pages using the Google Maps API. For more features and instruction, visit the Maps Documentation section at Google.