Page Summary
-
This example demonstrates how to add an advanced marker to a map using the
AdvancedMarkerElementclass from the Google Maps JavaScript API. -
The code imports the necessary libraries, initializes a map centered on specific coordinates, and then creates and places an advanced marker at the same location.
-
Included are code snippets in TypeScript, JavaScript, CSS, and HTML for a complete implementation of this feature.
-
You can explore the sample further through provided links for documentation, a live demo (JSFiddle), and instructions for running it locally using Git and Node.js.
This example shows creating a new AdvancedMarkerElement
to add an advanced
marker to a map.
Read the documentation .
TypeScript
const mapElement = document . querySelector ( 'gmp-map' ) as google . maps . MapElement ; async function initMap () { // Request needed libraries. const { Map } = ( await google . maps . importLibrary ( 'maps' )) as google . maps . MapsLibrary ; const { AdvancedMarkerElement } = ( await google . maps . importLibrary ( 'marker' )) as google . maps . MarkerLibrary ; const marker = new AdvancedMarkerElement ({ position : { lat : 37.4239163 , lng : - 122.0947209 }, }); mapElement . append ( marker ); } initMap ();
JavaScript
const mapElement = document . querySelector ( 'gmp-map' ); async function initMap () { // Request needed libraries. const { Map } = ( await google . maps . importLibrary ( 'maps' )); const { AdvancedMarkerElement } = ( await google . maps . importLibrary ( 'marker' )); const marker = new AdvancedMarkerElement ({ position : { lat : 37.4239163 , lng : - 122.0947209 }, }); mapElement . append ( marker ); } initMap ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ gmp-map { height : 100 % ; } /* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Default Advanced Marker</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script> </head> <body> <gmp-map center="37.4239163,-122.0947209" zoom="14" map-id="4504f8b37365c3d0"></gmp-map> </body> </html>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone https : //github.com/googlemaps-samples/js-api-samples.gitcd samples / advanced - markers - simplenpm inpm start
