Page Summary
-
This example demonstrates how to set the altitude of a marker using the Google Maps JavaScript API.
-
It utilizes the
AdvancedMarkerElementandPinElementclasses from themarkerlibrary to create and position a custom marker. -
The marker's altitude is specified in meters above the ground within the
positionobject using theLatLngAltitudeLiteraltype. -
The sample provides code snippets in TypeScript, JavaScript, CSS, and HTML to illustrate the implementation.
This example shows setting altitude for a marker.
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 , PinElement } = ( await google . maps . importLibrary ( 'marker' )) as google . maps . MarkerLibrary ; mapElement . innerMap . setOptions ({ tilt : 67.5 , heading : 45 , }); const pin = new PinElement ({ background : '#4b2e83' , borderColor : '#b7a57a' , glyphColor : '#b7a57a' , scale : 2.0 , }); const marker = new AdvancedMarkerElement ({ // Set altitude to 20 meters above the ground. position : { lat : 47.65170843460547 , lng : - 122.30754 , altitude : 20 , } as google . maps . LatLngAltitudeLiteral , }); marker . append ( pin ); 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 , PinElement } = ( await google . maps . importLibrary ( 'marker' )); mapElement . innerMap . setOptions ({ tilt : 67.5 , heading : 45 , }); const pin = new PinElement ({ background : '#4b2e83' , borderColor : '#b7a57a' , glyphColor : '#b7a57a' , scale : 2.0 , }); const marker = new AdvancedMarkerElement ({ // Set altitude to 20 meters above the ground. position : { lat : 47.65170843460547 , lng : - 122.30754 , altitude : 20 , }, }); marker . append ( pin ); mapElement . append ( marker ); } initMap ();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ # map { height : 100 % ; } /* * Optional: Makes the sample page fill the window. */ html , body { height : 100 % ; margin : 0 ; padding : 0 ; }
HTML
<html> <head> <title>Advanced Marker Altitude</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="47.65196191658531,-122.30716770065949" zoom="19" map-id="6ff586e93e18149f"></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 - altitudenpm inpm start
