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

Add a Google Map with Markers using HTML

Page Summary

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 page using custom HTML elements. Here is the map you'll create using this tutorial. A marker is positioned at Ottumwa, Iowa.

Get started

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

Get an API key
Create HTML, CSS, and JS
Add a map
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:

Go to the Google Cloud console .
Create or select a project.
Click Continueto enable the API and any related services.
On the Credentialspage, 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.
To prevent quota theft and secure your API key, see Using API Keys .
Enable billing. See Usage and Billing for more information.
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&libraries=maps,marker"
    defer
></script>

Since the HTML page should be freestanding, add the CSS code directly to 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 the gmp-map HTML element and paste it within the body of the HTML page:

< gmp 
 - 
 map 
  
 center 
 = 
 "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 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="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>  index.html

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

Try the finished example on JSFiddle .

Tips and troubleshooting

You can customize the map with custom styling .
Use the Developer Tools Consolein 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 herefrom 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>
        <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>  index.html

Add a Google Map with Markers using HTML Stay organized with collections Save and categorize content based on your preferences.