You're all set!

To start developing, please head over to our developer documentation.

Activate the Google Maps JavaScript API

To get you started we'll guide you through the Google Developers Console to do a few things first:

  1. Create or choose a project
  2. Activate the Google Maps JavaScript API and related services
  3. Create appropriate keys
Continue

Adding a Google Map to Your Website

Introduction

This tutorial shows you how to add a simple Google map to a web page. It suits people with beginner or intermediate knowledge of HTML and CSS, and a little knowledge of JavaScript. For an advanced guide to creating maps, read the developer's guide.

Below is the map you'll create using this tutorial.

Try it yourself

The sample below shows all the code needed to create a map.

function initMap() {
  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
      center: {lat: 44.540, lng: -78.546},
      zoom: 8
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
        width: 100%;
        height: 400px;
     }
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
<!DOCTYPE html>
<html>
  <head>
    <style>
 #map {
        width: 100%;
        height: 400px;
     }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 44.540, lng: -78.546},
            zoom: 8
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Handy tips: At the top right corner of every sample code section are two buttons.

Getting started

There are three stages to adding a Google map to your web page:

  1. Create an HTML page
  2. Add a map
  3. Get an API key

You need a web browser. Choose a well-known one like Google Chrome (recommended), Firefox, Safari or Internet Explorer, based on your platform.

Step 1: Create an HTML page

Here's the code for a basic HTML web page:

<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
  width: 100%;
  height: 400px;
  background-color: grey;
}
<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 100%;
        height: 400px;
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
  </body>
</html>

Note that this is a very basic page with a heading level three (h3), a single div element, and a style element which are all explained in the table below. You can add any content you like to the web page.

Try it yourself

At the top right corner of the sample code above are two buttons. Click the left-most button to open the sample in JSFiddle.

Understanding the code

This table explains each section of the above code.

Code and description
<html>
 <head>
 </head>
 <body>
 </body>
</html>

Creates an HTML page consisting of a head and a body.
<h3>My Google Maps Demo</h3>

Adds a heading level three above the map.
<div id="map"></div>

Defines an area of the page for your Google map.
At this stage of the tutorial, the div appears as just a grey block, because you have not yet added a map. It's grey because of the CSS you've applied. See below.
<style>
 #map {
   width: 100%;
   height: 400px;
   background-color: grey;
 }
</style>

The style element in the head sets the div size for your map.
Set the div width and height to greater than 0px for the map to be visible.
In this case, the div is set to a height of 500 pixels, and width of 100% to display the across the width of your web page. Apply background-color: grey to the div to view the area for your map on the web page.

Step 2: Add a map

This section shows you how to load the Google Maps JavaScript API into your web page, and how to write your own JavaScript that uses the API to add a map.

function initMap() {
  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
      center: {lat: 44.540, lng: -78.546},
      zoom: 8
  });
}
<h3>My Google Maps Demo</h3>
<div id="map"></div>
#map {
        width: 100%;
        height: 400px;
     }
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
<!DOCTYPE html>
<html>
  <head>
    <style>
#map {
        width: 100%;
        height: 400px;
     }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
            center: {lat: 44.540, lng: -78.546},
            zoom: 8
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Try it yourself

At the top right corner of the sample code above are two buttons. Click the left-most button to open the sample in JSFiddle.

Understanding the code

Notice that the above sample no longer contains the CSS that colors the div grey. This is because the div now contains a map.

This table explains each section of the above code.

Code and description
<script>
async defer
src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
</script>

The script loads the API from the specified URL.
The callback parameter executes the initMap function after the API is completely loaded.
The async attribute allows the browser to continue rendering the rest of your page while the API loads.
The key parameter contains your API key. You don't need your own API key when experimenting with this tutorial in JSFiddle. See Step 3: Get an API key for instructions on getting your own API key later.
<script>
  function initMap() {
  }
</script>

The initMap function initializes and adds the map when the web page loads. Use a script tag to include your own JavaScript which contains the initMap function.
getElementById

Add this function to find the map div on the web page.
new google.maps.Map()

Add this new Google maps object to construct a map in the div element.
{
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
  center: {lat: 44.540, lng: -78.546},
  zoom: 8
  }};
}

Add properties to the map including the center and zoom level. See the documentation for other property options.
The center property tells the API where to center the map. The map coordinates are set in the order: latitude, longitude.
The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom, and displays the entire earth. Set the zoom value higher to zoom in to the earth at higher resolutions.

Step 3: Get an API key

This section explains how to authenticate your app to the Google Maps JavaScript API using your own API key.

Follow these steps to get an API key:

  1. Go to the Google API Console.
  2. Create or select a project.
  3. Click Continue to enable the API and any related services.
  4. On the Credentials page, get a Browser key (and set the API Credentials).

    Note: If you have an existing Browser key, you may use that key.

  5. To prevent quota theft, secure your API key following these best practices.

  6. (Optional) Enable billing. See Usage Limits for more information.

  7. Copy the entire code of this tutorial from this page, to your text editor. If you don't already have a text editor, here are some recommendations: You can use: Notepad++ (for Windows); TextEdit (for macOS); gedit, KWrite, among others (for Linux machines).
  8. Replace the value of the key parameter in the URL with your own API key (that's the API key that you've just obtained).

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
      async defer>
    </script>
    
  9. Save this file with a name that ends with .html, like google-maps.html.

  10. Load the HTML file in a web browser by dragging it from your desktop onto your browser. Alternatively, double-clicking the file works on most operating systems.

Tips and trouble-shooting

  • Use the JSFiddle interface to display HTML, CSS and JavaScript code in separate panes. You can run the code and display output in the Results pane.
  • You can tweak options like style and properties to customize the map. For more information on customizing maps, read more of the Maps JavaScript API.
  • Use the Developer Tools Console in your web browser to test and run your code, read error reports and solve problems with your code.

    Keyboard shortcuts to open the console in Chrome: Command+Option+J (on Mac), or Control+Shift+J (on Windows).

Send feedback about...

Google Maps JavaScript API
Google Maps JavaScript API
Need help? Visit our support page.