Places UI Kit: A ready-to-use library that provides room for customization and low-code development. Try it out, and share yourinput on your UI Kit experience.

Add a Google Map with Markers using HTML

  • This tutorial demonstrates how to add a Google map with markers to a webpage using HTML and the Maps JavaScript API.

  • You will need to obtain an API key from the Google Cloud console and enable billing for the project.

  • The tutorial provides code snippets for creating the HTML structure, adding the map, and placing markers at specific locations.

  • Customization options are available, such as custom styling and using the Geocoding service to convert addresses into coordinates.

Introduction

This tutorial shows you how to add a Google map with a marker to a web pageusing custom HTML elements. Here is the map you'll create using thistutorial. A marker is positioned at Ottumwa, Iowa.

Get started

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

  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 thelist of supported browsers.

Step 1: Get an API key

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

Follow these steps to get an API key:

  1. Go to theGoogle Cloud console.

  2. Create or select a project.

  3. ClickContinue to enable the API and any related services.

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

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

  6. Enable billing. SeeUsage and Billingfor 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>AddaMapwithMarkersusingHTML</title><!--TODO:Addbootstrapscripttag.--></head><body><!--TODO:Addamapwithmarkers.--></body></html>

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

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

Since the HTML page should be freestanding, add the CSS code directlyto the page:

<html>  <head>    <title>Add a Map with Markers using HTML</title>    <style>      gmp-map {        height: 100%;      }      html,      body {        height: 100%;        margin: 0;        padding: 0;      }    </style>    <script      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"      defer    ></script>  </head>  <body>    <!-- TODO: Add a map with markers. -->  </body></html>

Step 3: Add a map

To add a Google map to the page, copy thegmp-map HTML element and paste itwithin thebody of the HTML page:

<gmp-mapcenter="41.027748173921374, -92.41852445367961"zoom="13"map-id="DEMO_MAP_ID"style="height: 400px"></gmp-map>

This creates a map centered on Ottumwa, Iowa, but there is no marker yet.

Step 4: Add a marker

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

<gmp-map    center="41.027748173921374, -92.41852445367961"    zoom="13"    map-id="DEMO_MAP_ID">    <gmp-advanced-marker        position="41.027748173921374, -92.41852445367961"        title="Ottumwa, IA"></gmp-advanced-marker></gmp-map>

The preceding code adds a marker to the map. A map ID is required to useAdvanced Markers (DEMO_MAP_ID is fine to use).

Try the finished example on JSFiddle.

Tips and troubleshooting

  • You can customize the map with customstyling.
  • Use theDeveloper Tools Console in your web browser to test and run yourcode, 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 andlongitude 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 requirecoordinates.
    3. SelectWhat's here from the context menu that appears.The map displays a card at the bottom of the screen. Find the latitudeand longitude coordinates in the last row of the card.

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

Full example code

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

<html>    <head>        <title>Add a Map with Markers using HTML</title>        <style>            gmp-map {                height: 100%;            }            html,            body {                height: 100%;                margin: 0;                padding: 0;            }        </style>        <script type="module" src="./index.js"></script>        <script            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"            defer></script>    </head>    <body>        <gmp-map            center="41.027748173921374, -92.41852445367961"            zoom="13"            map-id="DEMO_MAP_ID">            <gmp-advanced-marker                position="41.027748173921374, -92.41852445367961"                title="Ottumwa, IA"></gmp-advanced-marker>        </gmp-map>    </body></html>

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-12-11 UTC.