Get a Maps Demo Key: Try out select Maps JavaScript API and Places UI Kit features at no cost with a Maps Demo Key—no billing information required.

Add a Map with Markers using HTML

Page Summary

This example demonstrates adding markers to a map using the <gmp-advanced-marker> web component.
The sample utilizes Google Maps JavaScript API with web components for a streamlined approach.
Both TypeScript and JavaScript code snippets are provided for implementation flexibility.
The HTML structure showcases the integration of the map and markers within a web page.
Users can explore the sample interactively through JSFiddle or Google Cloud Shell, or clone the repository for local execution.

This example adds markers to a map, using <gmp-advanced-marker>.

Read the documentation.

TypeScript

// This example adds a map with markers, using web components.index.ts

JavaScript

// This example adds a map with markers, using web components.index.js

CSS

/* Note: This CSS file is intentionally blank. */style.css

HTML

<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
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></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

Clone Sample

Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. You will also need a Google Maps API key.

The following commands clone the repository, install dependencies, and copy the environment file.

  git clone https://github.com/googlemaps-samples/js-api-samples.git
  cd js-api-samples
  npm i
  cp .env.template .env

Once you copy the environment file, make sure to open the .env file and replace <Insert your own development API key here> with your actual API key before starting the sample.

  cd samples/web-components-markers
  npm start