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

<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=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&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

Add a Map with Markers using HTML

Page Summary

TypeScript

JavaScript

CSS

HTML

Try Sample

Clone Sample

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

Page Summary

TypeScript

JavaScript

CSS

HTML

Try Sample

Clone Sample

Add a Map with Markers using HTML