Skip to content

feat: Updates markers altitude sample to use the gmp-map element. #823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Nov 4, 2025
Merged

feat: Updates markers altitude sample to use the gmp-map element. #823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0d8591b
feat: Updates markers altitude sample to use the gmp-map element.
willum070 Oct 7, 2025
8d29363
Merge branch 'main' into qsu-am-altitude
willum070 Oct 9, 2025
6be2274
Refactor innerMap options setting
willum070 Nov 4, 2025
844e6ea
Refactor to remove innerMap var
willum070 Nov 4, 2025
37f380d
Update copyright year and marker variable name
willum070 Nov 4, 2025
c8cd4a9
Update marker creation to append pin element
willum070 Nov 4, 2025
71cb2ee
Merge branch 'main' into qsu-am-altitude
willum070 Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions samples/advanced-markers-altitude/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
Expand All @@ -11,13 +11,12 @@

<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>

<!-- 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>
<!-- [END maps_advanced_markers_altitude] -->
20 changes: 10 additions & 10 deletions samples/advanced-markers-altitude/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* Copyright 2025 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/

// [START maps_advanced_markers_altitude]
let map;
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;

map = new Map(document.getElementById('map') as HTMLElement, {
center: {lat: 47.65196191658531, lng: -122.30716770065949},
zoom: 19,
mapElement.innerMap.setOptions ({
tilt: 67.5,
heading: 45,
mapId: '6ff586e93e18149f',
});

// [START maps_advanced_markers_altitude_marker]
const pin = new PinElement({
background: '#4b2e83',
Expand All @@ -26,14 +25,15 @@ async function initMap() {
scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
map,
content: pin.element,
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);
// [END maps_advanced_markers_altitude_marker]
}

initMap();
// [END maps_advanced_markers_altitude]
// [END maps_advanced_markers_altitude]