Skip to content

Commit 4545833

Browse files
willum070googlemaps-bot
willum070
and
googlemaps-bot
authored
Update dist folder [skip ci] (#335)
Co-authored-by: googlemaps-bot <[email protected]>
1 parent 05959c3 commit 4545833

File tree

15 files changed

+190
-336
lines changed

15 files changed

+190
-336
lines changed

‎dist/samples/3d-marker-collision-behavior/app/index.html‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,16 @@
1717

1818
<!-- prettier-ignore -->
1919
<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))})
20-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
20+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>
2121

22-
<div class="detailsContainer">
23-
<label for="collisionSelect">Marker Collision behavior.</label>
24-
<select id="collisionSelect" >
25-
<option value="REQUIRED">REQUIRED</option>
26-
<option value="REQUIRED_AND_HIDES_OPTIONAL">REQUIRED_AND_HIDES_OPTIONAL</option>
27-
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">OPTIONAL_AND_HIDES_LOWER_PRIORITY</option>
28-
</select>
29-
<div style="font-size: 0.7em; width:500px;">
30-
<b>REQUIRED:</b> (default) Always display the marker regardless of collision.<br>
31-
<b>OPTIONAL_AND_HIDES_LOWER_PRIORITY:</b> Display the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higher zIndex is shown. If they have the same zIndex, the one with the lower vertical screen position is shown.<br>
32-
<b>REQUIRED_AND_HIDES_OPTIONAL:</b> Always display the marker regardless of collision, and hide any OPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labels that would overlap with the marker.<br>
33-
</div>
34-
</div>
35-
36-
<div class="textContainer">
37-
<div class="text">Select the marker collision method.</div>
38-
</div>
22+
<selector>
23+
<select id="selectElementId">
24+
<option value="">Pick a Collision Behavior</option>
25+
<option value="REQUIRED">Required</option>
26+
<option value="REQUIRED_AND_HIDES_OPTIONAL">Required and hides optional</option>
27+
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">Optional and hides lower priority</option>
28+
</select>
29+
</selector>
3930
</body>
4031
</html>
4132
<!-- [END maps_3d_marker_collision_behavior] -->

‎dist/samples/3d-marker-collision-behavior/app/index.ts‎

Lines changed: 52 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -6,59 +6,57 @@
66

77
// @ts-nocheck
88
// [START maps_3d_marker_collision_behavior]
9-
let map;
10-
async function init() {
11-
// Request needed libraries.
12-
const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d");
13-
14-
map = new Map3DElement({
15-
center: { lat: 47.6094, lng: -122.3390, altitude: 0 },
16-
range: 1000,
17-
mode: 'HYBRID'
18-
});
19-
20-
map.mode = "SATELLITE";
21-
let zindex = 0;
22-
for (const [lng, lat] of positions) {
23-
const marker = new Marker3DElement({
24-
position: { lat, lng },
25-
// Try setting a different collision behavior here.
26-
collisionBehavior: google.maps.CollisionBehavior.REQUIRED,
27-
drawsWhenOccluded : true,
28-
zIndex : zindex++,
29-
label: zindex.toString(),
30-
});
31-
map.append(marker);
32-
}
33-
34-
const collisionSelect = document.getElementById('collisionSelect');
35-
collisionSelect.addEventListener('change', handleCollisionSelection);
36-
document.body.append(map);
37-
}
38-
39-
function handleCollisionSelection() {
40-
const selectedIndex = collisionSelect.selectedIndex;
41-
for (const marker of map.getElementsByTagName("gmp-marker-3d")) {
42-
marker.collisionBehavior = collisionSelect.value;
43-
}
44-
}
45-
46-
const positions = [
47-
[-122.3402, 47.6093],
48-
[-122.3402, 47.6094],
49-
[-122.3403, 47.6094],
50-
[-122.3384, 47.6098],
51-
[-122.3389, 47.6095],
52-
[-122.3396, 47.6095],
53-
[-122.3379, 47.6097],
54-
[-122.3378, 47.6097],
55-
[-122.3396, 47.6091],
56-
[-122.3383, 47.6089],
57-
[-122.3379, 47.6093],
58-
[-122.3381, 47.6095],
59-
[-122.3378, 47.6095],
60-
];
61-
62-
init();
9+
const markers = [];
10+
11+
async function init() {
12+
// Request needed libraries.
13+
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
14+
15+
const map = new Map3DElement({
16+
center: { lat: 47.6094, lng: -122.3390, altitude: 0 },
17+
range: 1000,
18+
mode: MapMode.HYBRID,
19+
});
20+
21+
for (const [lng, lat] of positions) {
22+
const marker = new Marker3DElement({
23+
position: {lat, lng},
24+
// Try setting a different collision behavior here.
25+
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
26+
});
27+
28+
markers.push(marker)
29+
map.append(marker);
30+
}
31+
32+
document.body.append(map);
33+
}
34+
35+
const positions = [
36+
[-122.3402, 47.6093],
37+
[-122.3402, 47.6094],
38+
[-122.3403, 47.6094],
39+
[-122.3384, 47.6098],
40+
[-122.3389, 47.6095],
41+
[-122.3396, 47.6095],
42+
[-122.3379, 47.6097],
43+
[-122.3378, 47.6097],
44+
[-122.3396, 47.6091],
45+
[-122.3383, 47.6089],
46+
[-122.3379, 47.6093],
47+
[-122.3381, 47.6095],
48+
[-122.3378, 47.6095],
49+
];
50+
51+
init();
52+
53+
const dropdown = document.getElementById('selectElementId');
54+
dropdown.addEventListener('change', drawMap);
55+
56+
function drawMap(event) {
57+
for (const marker of markers) {
58+
marker.collisionBehavior = dropdown.value || google.maps.CollisionBehavior.REQUIRED;
59+
}
60+
}
6361

6462
// [END maps_3d_marker_collision_behavior]

‎dist/samples/3d-marker-collision-behavior/app/style.css‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,40 +16,8 @@ body {
1616
margin: 0;
1717
padding: 0;
1818
}
19-
.textContainer {
20-
background-color: #4d90fe;
21-
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
22-
margin: 10px;
23-
overflow: hidden;
24-
position: absolute;
25-
left: 50%;
26-
bottom: 5px;
27-
transform: translateX(-50%);
28-
border: 1px solid white;
29-
border-radius: 2px;
30-
padding: 5px;
31-
z-index: 1000;
32-
}
33-
34-
.detailsContainer {
35-
background-color: #fff;
36-
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
37-
margin: 10px;
38-
font: 400 18px Roboto, Arial, sans-serif;
39-
overflow: hidden;
40-
position: absolute;
41-
left: 50%;
42-
bottom: 50px;
43-
transform: translateX(-50%);
44-
border: 2px solid #4d90fe;
45-
border-radius: 2px;
46-
padding: 5px;
47-
z-index: 1000;
48-
}
49-
50-
.text {
51-
color: white;
52-
font-size: 1em;
53-
text-align: center;
54-
}
19+
selector {
20+
padding: 2px;
21+
float: right;
22+
}
5523
/* [END maps_3d_marker_collision_behavior] */

‎dist/samples/3d-marker-collision-behavior/dist/assets/index-CCrYRt4O.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/samples/3d-marker-collision-behavior/dist/assets/index-CDmjty7u.css‎

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

‎dist/samples/3d-marker-collision-behavior/dist/assets/index-CyLffGK2.js‎

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

‎dist/samples/3d-marker-collision-behavior/dist/assets/index-DXmDdlR4.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/*
2+
* @license
3+
* Copyright 2025 Google LLC. All Rights Reserved.
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/html,map{height:100%}body{height:100%;margin:0;padding:0}selector{padding:2px;float:right}

‎dist/samples/3d-marker-collision-behavior/dist/index.html‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,33 +9,24 @@
99
<head>
1010
<title>Map</title>
1111

12-
<script type="module" crossorigin src="./assets/index-CyLffGK2.js"></script>
13-
<link rel="stylesheet" crossorigin href="./assets/index-CDmjty7u.css">
12+
<script type="module" crossorigin src="./assets/index-CCrYRt4O.js"></script>
13+
<link rel="stylesheet" crossorigin href="./assets/index-DXmDdlR4.css">
1414
</head>
1515
<body>
1616
<div id="map"></div>
1717

1818
<!-- prettier-ignore -->
1919
<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))})
20-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
20+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>
2121

22-
<div class="detailsContainer">
23-
<label for="collisionSelect">Marker Collision behavior.</label>
24-
<select id="collisionSelect" >
25-
<option value="REQUIRED">REQUIRED</option>
26-
<option value="REQUIRED_AND_HIDES_OPTIONAL">REQUIRED_AND_HIDES_OPTIONAL</option>
27-
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">OPTIONAL_AND_HIDES_LOWER_PRIORITY</option>
28-
</select>
29-
<div style="font-size: 0.7em; width:500px;">
30-
<b>REQUIRED:</b> (default) Always display the marker regardless of collision.<br>
31-
<b>OPTIONAL_AND_HIDES_LOWER_PRIORITY:</b> Display the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higher zIndex is shown. If they have the same zIndex, the one with the lower vertical screen position is shown.<br>
32-
<b>REQUIRED_AND_HIDES_OPTIONAL:</b> Always display the marker regardless of collision, and hide any OPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labels that would overlap with the marker.<br>
33-
</div>
34-
</div>
35-
36-
<div class="textContainer">
37-
<div class="text">Select the marker collision method.</div>
38-
</div>
22+
<selector>
23+
<select id="selectElementId">
24+
<option value="">Pick a Collision Behavior</option>
25+
<option value="REQUIRED">Required</option>
26+
<option value="REQUIRED_AND_HIDES_OPTIONAL">Required and hides optional</option>
27+
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">Optional and hides lower priority</option>
28+
</select>
29+
</selector>
3930
</body>
4031
</html>
4132
<!-- [END maps_3d_marker_collision_behavior] -->

‎dist/samples/3d-marker-collision-behavior/docs/index.html‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,16 @@
1717

1818
<!-- prettier-ignore -->
1919
<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))})
20-
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha",});</script>
20+
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>
2121

22-
<div class="detailsContainer">
23-
<label for="collisionSelect">Marker Collision behavior.</label>
24-
<select id="collisionSelect" >
25-
<option value="REQUIRED">REQUIRED</option>
26-
<option value="REQUIRED_AND_HIDES_OPTIONAL">REQUIRED_AND_HIDES_OPTIONAL</option>
27-
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">OPTIONAL_AND_HIDES_LOWER_PRIORITY</option>
28-
</select>
29-
<div style="font-size: 0.7em; width:500px;">
30-
<b>REQUIRED:</b> (default) Always display the marker regardless of collision.<br>
31-
<b>OPTIONAL_AND_HIDES_LOWER_PRIORITY:</b> Display the marker only if it does not overlap with other markers. If two markers of this type would overlap, the one with the higher zIndex is shown. If they have the same zIndex, the one with the lower vertical screen position is shown.<br>
32-
<b>REQUIRED_AND_HIDES_OPTIONAL:</b> Always display the marker regardless of collision, and hide any OPTIONAL_AND_HIDES_LOWER_PRIORITY markers or labels that would overlap with the marker.<br>
33-
</div>
34-
</div>
35-
36-
<div class="textContainer">
37-
<div class="text">Select the marker collision method.</div>
38-
</div>
22+
<selector>
23+
<select id="selectElementId">
24+
<option value="">Pick a Collision Behavior</option>
25+
<option value="REQUIRED">Required</option>
26+
<option value="REQUIRED_AND_HIDES_OPTIONAL">Required and hides optional</option>
27+
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">Optional and hides lower priority</option>
28+
</select>
29+
</selector>
3930
</body>
4031
</html>
4132
<!-- [END maps_3d_marker_collision_behavior] -->

‎dist/samples/3d-marker-collision-behavior/docs/index.js‎

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,26 @@
66
*/
77
// @ts-nocheck
88
// [START maps_3d_marker_collision_behavior]
9-
let map;
9+
const markers = [];
1010
async function init() {
1111
// Request needed libraries.
12-
const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d");
13-
map = new Map3DElement({
12+
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
13+
const map = new Map3DElement({
1414
center: { lat: 47.6094, lng: -122.3390, altitude: 0 },
1515
range: 1000,
16-
mode: 'HYBRID'
16+
mode: MapMode.HYBRID,
1717
});
18-
map.mode = "SATELLITE";
19-
let zindex = 0;
2018
for (const [lng, lat] of positions) {
2119
const marker = new Marker3DElement({
2220
position: { lat, lng },
2321
// Try setting a different collision behavior here.
24-
collisionBehavior: google.maps.CollisionBehavior.REQUIRED,
25-
drawsWhenOccluded: true,
26-
zIndex: zindex++,
27-
label: zindex.toString(),
22+
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
2823
});
24+
markers.push(marker);
2925
map.append(marker);
3026
}
31-
const collisionSelect = document.getElementById('collisionSelect');
32-
collisionSelect.addEventListener('change', handleCollisionSelection);
3327
document.body.append(map);
3428
}
35-
function handleCollisionSelection() {
36-
const selectedIndex = collisionSelect.selectedIndex;
37-
for (const marker of map.getElementsByTagName("gmp-marker-3d")) {
38-
marker.collisionBehavior = collisionSelect.value;
39-
}
40-
}
4129
const positions = [
4230
[-122.3402, 47.6093],
4331
[-122.3402, 47.6094],
@@ -54,4 +42,11 @@ const positions = [
5442
[-122.3378, 47.6095],
5543
];
5644
init();
45+
const dropdown = document.getElementById('selectElementId');
46+
dropdown.addEventListener('change', drawMap);
47+
function drawMap(event) {
48+
for (const marker of markers) {
49+
marker.collisionBehavior = dropdown.value || google.maps.CollisionBehavior.REQUIRED;
50+
}
51+
}
5752
// [END maps_3d_marker_collision_behavior]

0 commit comments

Comments
 (0)