How to Add a Google Map to Your Web Page

of 05

Get a Google Maps API Key for Your Site

Google Developers Console APIs

The best way to add a Google map to your website is to use Google Maps API. And Google recommends that you get an API key in order to use the maps.

You are not required to get an API key to use Google Maps API v3, but it's very useful as it lets you monitor your usage and pay for additional access. Google Maps API v3 has a quota of 1 request per second per user to a maximum of 25,000 requests per day. If your pages exceed those limits you will need to enable billing in order to get more.

How to get a Google Maps API Key

  1. Log in to Google using your Google account.
  2. Go to the Developers Console
  3. Scroll through the list and find the Google Maps API v3, then click the OFF button to turn it on.
  4. Read and agree to the terms.
  5. Go to the APIs console and select API Access from the left-hand menu
  6. In the Simple API Access section, click on the Create new Server key... button.
  7. Enter the IP address of your web server. This is the IP where your Maps requests will be coming from.
  8. Copy the text on the “API key:” line (not including that title). This is your API key for your maps.
of 05

Convert Your Address to Coordinates

Results from a search

In order to use Google Maps on your web pages, you need to have the latitude and longitude for the location. You can get these from a GPS or you can use an online tool like to tell you.

  1. Go to and type in your address in the search box.
  2. Copy the first number for the latitude (without a letter in front) and paste it into a text file. You do not need the degree (º) indicator.
  3. Copy the first number for the longitude (again without a letter in front) and paste it into your text file.

Your latitude and longitude will look something like this:

-73.990838 only works for U.S. addresses, if you need to get the coordinates in another country, you should search for a similar tool in your region.

of 05

Adding the Map to Your Web Page

Google Maps

First, add the map script to your document.

Open your web page and add the following to the HEAD of your document.

Change the highlighted portion to the latitude and longitude numbers you wrote down in step two.

Second, add the map element to your page.

Once you have all the script elements added to the HEAD of your document, you need to position your map on the page. You do this by adding a DIV element with the id="map-canvas" attribute.

Finally, Upload, and Test

The last thing to do is upload your page and test that your map displays. Here is an example of a Google map on the page. Note, because of the way the CMS works, you will have to click a link to get the map to appear. This will not be the case on your page.

If your map doesn't show up, try initializing it with a BODY attribute:

Other things to check if your map isn't loading include:

  • Look for typos in your JavaScript, including case. JavaScript is case sensitive. Make sure that you have the zoom and center options set.
  • Make sure that your DIV element is on the page with the correct ID.
  • Make sure that your DIV element has a height.
of 05

Add a Marker to Your Map

Google Map with marker

But what good is a map of your location if there is no marker telling people where they should go?

To add a standard Google Maps red marker add the following to your script below the var map = ... line:

var myLatlng = new google.maps.LatLng(latitude,longitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Former Headquarters"

Change the highlighted text to your latitude and longitude and the title you'd like to appear when people hover over the marker.

You can add as many markers to the page as you like, just add new variables with new coordinates and titles, but if the map is too small to display all the markers, they won't show unless the reader zooms out.

var latlng2 = new google.maps.LatLng(37.3316591,-122.0301778);
var myMarker2 = new google.maps.Marker({
position: latlng2,
map: map,
title:"Apple Computer"

Here is an example of a Google map with a marker.

Because of the way the CMS works, you have to click a link to get the map to appear. This will not be the case on your page.

of 05

Add a Second (or More) Map to Your Page

If you've looked at our example Google maps page you'll notice that we have more than one map displayed on the page. This is very easy to do. Here's how.

  1. Get the latitude and longitude of all the maps you want to display as we learned in step 2 of this tutorial.
  2. Insert the first map as we learned in step 3 of this tutorial. If you want the map to have a marker, add the marker as in step 4.
  3. For the second map, you will need to add 3 new lines to your initialize() script:
    var latlng2 = new google.maps.LatLng(second coordinates);
    var myOptions2 = { zoom: 18, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);
  4. If you want a marker on the new map too, add a second marker pointing at the second coordinates and the second map:
    var myMarker2 = new google.maps.Marker({ position: latlng2, map: map2, title:"Your Marker Title" });
  5. Then add the second where you want the second map. And be sure to give it an id="map_canvas_2" ID.
  6. When your page loads, two maps will display.