How to Add a Google Map to Your Web Page

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Add a Google Map to Your Web Page." ThoughtCo, May. 5, 2017, thoughtco.com/add-google-map-to-website-3468865. Kyrnin, Jennifer. (2017, May 5). How to Add a Google Map to Your Web Page. Retrieved from https://www.thoughtco.com/add-google-map-to-website-3468865 Kyrnin, Jennifer. "How to Add a Google Map to Your Web Page." ThoughtCo. https://www.thoughtco.com/add-google-map-to-website-3468865 (accessed October 22, 2017).
01
of 05

Get a Google Maps API Key for Your Site

Google Developers Console APIs
Cloud view of the Google Developers Console. Screen shot by J Kyrnin

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. Login 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. If you don't know your IP address, you can look it up.
  8. Copy the text on the “API key:” line (not including that title). This is your API key for your maps.
02
of 05

Convert Your Address to Coordinates

Results from a Geocoder.us search
Use the indicated numbers for latitude and longitude. Screen shot by J Kyrnin

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 Geocoder.us to tell you.

  1. Go to Geocoder.us 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:

40.756076
-73.990838

Geocoder.us 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.

03
of 05

Adding the Map to Your Web Page

Google Maps
Google Maps. Screen shot by J Kyrnin - Map image courtesy Google

First, Add the Map Script to the

of 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. I recommend you also style this div with the width and height that will fit on your page:

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

onload="initialize()">

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.
04
of 05

Add a Marker to Your Map

Google Map with marker
Google Map with marker. Screen shot by J Kyrnin - Map image courtesy Google

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 About.com 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. Note, because of the way the About.com CMS works, you have to click a link to get the map to appear. This will not be the case on your page.

05
of 05

Add a Second (or More) Map to Your Page

If you've looked at my example Google maps page you'll notice that I 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

Here is the code of a page with two Google maps on it: