Add a Google Map with Markers using HTML

Introduction

This tutorial shows you how to add a Google map with a marker to a web page using HTML. Here is the map you'll create using this tutorial. Two markers are positioned, one in Mountain View, CA, and one in Seattle, WA.

Get started

These are the steps we'll cover for creating a Google map with a marker using HTML:

  1. Get an API key
  2. Create HTML, CSS, and JS
  3. Add a map
  4. Add a marker

You need a web browser. Choose a well-known one like Google Chrome (recommended), Firefox, Safari or Edge, based on your platform from the list of supported browsers.

Step 1: Get an API key

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

Follow these steps to get an API key:

  1. Go to the Google Cloud Console.

  2. Create or select a project.

  3. Click Continue to enable the API and any related services.

  4. On the Credentials page, get an API key (and set the API key restrictions). Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.

  5. To prevent quota theft and secure your API key, see Using API Keys.

  6. Enable billing. See Usage and Billing for more information.

  7. You are now ready to use your API key.

Step 2: Create HTML, CSS, and JS

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

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

In order to load a map, you must add a script tag containing the bootstrap loader for the Maps JavaScript API, as shown in the following snippet (add your own API key):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps,marker&v=beta" defer>
</script>

Spoiler alert: Try the finished example on JSFiddle.

Step 3: Add a map

To add a Google map to the page, copy the gmp-map HTML element and paste it within the body of the HTML page:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

This results in the following map:

The map you just created is centered on the San Jose metropolitan area.

Step 4: Add a marker

To add a marker to the map, use the gmp-advanced-marker HTML element. Copy the following snippet, and paste over the entire gmp-map you added in the previous step.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

The preceding code adds two markers and changes the zoom and center parameters on the gmp-map to better show those markers. A map ID is required to use Advanced Markers (DEMO_MAP_ID is fine to use).

Tips and troubleshooting

  • You can customize the map with custom styling.
  • Use the Developer Tools Console in your web browser to test and run your code, read error reports and solve problems with your code.
  • Use the following keyboard shortcuts to open the console in Chrome:
    Command+Option+J (on Mac), or Control+Shift+J (on Windows).

  • Follow the steps below to get the latitude and longitude coordinates for a location on Google Maps.

    1. Open Google Maps in a browser.
    2. Right-click the exact location on the map for which you require coordinates.
    3. Select What's here from the context menu that appears. The map displays a card at the bottom of the screen. Find the latitude and longitude coordinates in the last row of the card.

  • You can convert an address into latitude and longitude coordinates using the Geocoding service. The developer guides provide detailed information on getting started with the Geocoding service.

Full example code

Following is the final map, and full example code that was used for this tutorial.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html