Skip to content

Commit 76c5ae0

Browse files
willum070willum070
authored
refactor: migrate AdvancedMarkerElement to native DOM events (#1653)
* refactor(samples): migrate AdvancedMarkerElement event listeners to native DOM events Change-Id: I8977020fc4d94e5edced2a1e17308b19a9cefd5e * Add code to remove event listeners. Change-Id: I2cd3b4946fda3ade0a7e05ae1ba0e2a17daecd76 * fix: hide altitude from draggable marker display Change-Id: I4514f42a0b6ed404bd19bf40fad3b5591eeb7045 * fix: ensure AdvancedMarkerElement is clickable after DOM event migration Change-Id: I8fe20ac4dc6614373ee5c84735028b8ec1d3baf8 * fix: Adds gmp-clickable to make marker clickable. Change-Id: Iadcaa696f0f22deaeba13b87c68d681b8b0cae82 * fix: Adds gmpClickable to make marker clickable. Change-Id: I4c6b055edf0d450727d63cf8dac9bdfce380d5b4 * fix: enforce strict location restriction for text search Change-Id: Ie501943793af1dea2e684bb6e80bb7b07ac744ad * fix: add gmp-place-name back to compact details view Change-Id: I15ea83292a6a6f443dbebe9df47f50da1873d0e1 * fix: make markers clickable in ui-kit-advanced-place-search-nearby Change-Id: I7765b6e044d6353f9edeae88df0cf97e7be20254 * fix: Adds gmpClickable to make markers clickable. Change-Id: Ib59a6a58cdf3ecf10fb1248dd5184ca324543af5 * fix: Adds gmpClickable to make markers clickable. Change-Id: I0e48ad7104d8be6bcde7c23c826aa744cda6023c * fix: Adds gmpClickable to make markers clickable. Change-Id: I9142f4ca4db11024ba1b0acefcd998e540392643 * fix: Removes gmp-place-name, it is intentionally omitted. Change-Id: I7e9eca2dd7c68400004fdf82af96c2b55379c253
1 parent faa64b6 commit 76c5ae0

23 files changed

Lines changed: 75 additions & 80 deletions

File tree

‎dist/samples/advanced-markers-draggable/app/index.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ async function init() {
2525
mapElement.append(draggableMarker);
2626
// [END maps_advanced_markers_draggable_marker]
2727

28-
draggableMarker.addListener('dragend', () => {
29-
const position = draggableMarker.position!;
28+
draggableMarker.addEventListener('gmp-dragend', () => {
29+
const position = draggableMarker.position as google.maps.LatLngAltitude;
3030
infoWindow.close();
31-
infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
31+
infoWindow.setContent(
32+
`Pin dropped at: ${position.lat}, ${position.lng}`
33+
);
3234
infoWindow.open(draggableMarker.map, draggableMarker);
3335
});
3436
}

‎dist/samples/advanced-markers-draggable/dist/assets/index-JP_TK6Ka.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/samples/advanced-markers-draggable/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
<script>
1313
// prettier-ignore
1414
(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))})({
15-
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
15+
key: "AIzaSyCvnRQfZBSFPtTg0ybJiiUm80Gs7iG6uRQ"
1616
});
1717
</script>
18-
<script type="module" crossorigin src="./assets/index-JP_TK6Ka.js"></script>
18+
<script type="module" crossorigin src="./assets/index-Dq_iCDtO.js"></script>
1919
<link rel="stylesheet" crossorigin href="./assets/index-BZDSROJH.css">
2020
</head>
2121
<body>

‎dist/samples/advanced-markers-draggable/docs/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,12 @@ async function init() {
2626
mapElement.append(draggableMarker);
2727
// [END maps_advanced_markers_draggable_marker]
2828

29-
draggableMarker.addListener('dragend', () => {
29+
draggableMarker.addEventListener('gmp-dragend', () => {
3030
const position = draggableMarker.position;
3131
infoWindow.close();
32-
infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
32+
infoWindow.setContent(
33+
`Pin dropped at: ${position.lat}, ${position.lng}`
34+
);
3335
infoWindow.open(draggableMarker.map, draggableMarker);
3436
});
3537
}

‎dist/samples/advanced-markers-draggable/docs/index.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,12 @@ async function init() {
2525
mapElement.append(draggableMarker);
2626
// [END maps_advanced_markers_draggable_marker]
2727

28-
draggableMarker.addListener('dragend', () => {
29-
const position = draggableMarker.position!;
28+
draggableMarker.addEventListener('gmp-dragend', () => {
29+
const position = draggableMarker.position as google.maps.LatLngAltitude;
3030
infoWindow.close();
31-
infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
31+
infoWindow.setContent(
32+
`Pin dropped at: ${position.lat}, ${position.lng}`
33+
);
3234
infoWindow.open(draggableMarker.map, draggableMarker);
3335
});
3436
}

‎dist/samples/advanced-markers-draggable/jsfiddle/demo.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,12 @@ async function init() {
2323
});
2424
mapElement.append(draggableMarker);
2525

26-
draggableMarker.addListener('dragend', () => {
26+
draggableMarker.addEventListener('gmp-dragend', () => {
2727
const position = draggableMarker.position;
2828
infoWindow.close();
29-
infoWindow.setContent(`Pin dropped at: ${JSON.stringify(position)}`);
29+
infoWindow.setContent(
30+
`Pin dropped at: ${position.lat}, ${position.lng}`
31+
);
3032
infoWindow.open(draggableMarker.map, draggableMarker);
3133
});
3234
}

‎dist/samples/advanced-markers-html/app/index.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@ async function init() {
2626
content: buildContent(property),
2727
position: property.position,
2828
title: property.description,
29+
gmpClickable: true,
2930
});
3031

31-
advancedMarkerElement.addListener('click', () => {
32+
advancedMarkerElement.addEventListener('gmp-click', () => {
3233
toggleHighlight(advancedMarkerElement);
3334
});
3435
}
@@ -72,17 +73,17 @@ function buildContent(property: Property) {
7273
<div>
7374
<i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i>
7475
<span class="fa-sr-only">bedroom</span>
75-
<span>${property.bed}</span>
76+
<span>${String(property.bed)}</span>
7677
</div>
7778
<div>
7879
<i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i>
7980
<span class="fa-sr-only">bathroom</span>
80-
<span>${property.bath}</span>
81+
<span>${String(property.bath)}</span>
8182
</div>
8283
<div>
8384
<i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i>
8485
<span class="fa-sr-only">size</span>
85-
<span>${property.size} ft<sup>2</sup></span>
86+
<span>${String(property.size)} ft<sup>2</sup></span>
8687
</div>
8788
</div>
8889
</div>

‎dist/samples/advanced-markers-html/dist/assets/index-DTiePOPF.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎dist/samples/advanced-markers-html/dist/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
<script>
1515
// prettier-ignore
1616
(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))})({
17-
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
17+
key: "AIzaSyCvnRQfZBSFPtTg0ybJiiUm80Gs7iG6uRQ"
1818
});
1919
</script>
20-
<script type="module" crossorigin src="./assets/index-DTiePOPF.js"></script>
20+
<script type="module" crossorigin src="./assets/index-BOwoijfP.js"></script>
2121
<link rel="stylesheet" crossorigin href="./assets/index-Cw_4ArvV.css">
2222
</head>
2323
<body>

‎dist/samples/advanced-markers-html/docs/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,10 @@ async function init() {
2727
content: buildContent(property),
2828
position: property.position,
2929
title: property.description,
30+
gmpClickable: true,
3031
});
3132

32-
advancedMarkerElement.addListener('click', () => {
33+
advancedMarkerElement.addEventListener('gmp-click', () => {
3334
toggleHighlight(advancedMarkerElement);
3435
});
3536
}
@@ -62,17 +63,17 @@ function buildContent(property) {
6263
<div>
6364
<i aria-hidden="true" class="fa fa-bed fa-lg bed" title="bedroom"></i>
6465
<span class="fa-sr-only">bedroom</span>
65-
<span>${property.bed}</span>
66+
<span>${String(property.bed)}</span>
6667
</div>
6768
<div>
6869
<i aria-hidden="true" class="fa fa-bath fa-lg bath" title="bathroom"></i>
6970
<span class="fa-sr-only">bathroom</span>
70-
<span>${property.bath}</span>
71+
<span>${String(property.bath)}</span>
7172
</div>
7273
<div>
7374
<i aria-hidden="true" class="fa fa-ruler fa-lg size" title="size"></i>
7475
<span class="fa-sr-only">size</span>
75-
<span>${property.size} ft<sup>2</sup></span>
76+
<span>${String(property.size)} ft<sup>2</sup></span>
7677
</div>
7778
</div>
7879
</div>

0 commit comments

Comments
 (0)