Skip to content

Update marker collision sample #334

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
willum070 merged 1 commit into from
Apr 22, 2025
+65 −108
Merged

Update marker collision sample #334

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
27 changes: 9 additions & 18 deletions samples/3d-marker-collision-behavior/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,25 +17,16 @@

<!-- 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: "alpha",});</script>
({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta",});</script>

<div class="detailsContainer">
<label for="collisionSelect">Marker Collision behavior.</label>
<select id="collisionSelect" >
<option value="REQUIRED">REQUIRED</option>
<option value="REQUIRED_AND_HIDES_OPTIONAL">REQUIRED_AND_HIDES_OPTIONAL</option>
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">OPTIONAL_AND_HIDES_LOWER_PRIORITY</option>
</select>
<div style="font-size: 0.7em; width:500px;">
<b>REQUIRED:</b> (default) Always display the marker regardless of collision.<br>
<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>
<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>
</div>
</div>

<div class="textContainer">
<div class="text">Select the marker collision method.</div>
</div>
<selector>
<select id="selectElementId">
<option value="">Pick a Collision Behavior</option>
<option value="REQUIRED">Required</option>
<option value="REQUIRED_AND_HIDES_OPTIONAL">Required and hides optional</option>
<option value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">Optional and hides lower priority</option>
</select>
</selector>
</body>
</html>
<!-- [END maps_3d_marker_collision_behavior] -->
106 changes: 52 additions & 54 deletions samples/3d-marker-collision-behavior/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,59 +6,57 @@

// @ts-nocheck
// [START maps_3d_marker_collision_behavior]
let map;
async function init() {
// Request needed libraries.
const { Map3DElement, Marker3DElement } = await google.maps.importLibrary("maps3d");

map = new Map3DElement({
center: { lat: 47.6094, lng: -122.3390, altitude: 0 },
range: 1000,
mode: 'HYBRID'
});

map.mode = "SATELLITE";
let zindex = 0;
for (const [lng, lat] of positions) {
const marker = new Marker3DElement({
position: { lat, lng },
// Try setting a different collision behavior here.
collisionBehavior: google.maps.CollisionBehavior.REQUIRED,
drawsWhenOccluded : true,
zIndex : zindex++,
label: zindex.toString(),
});
map.append(marker);
}

const collisionSelect = document.getElementById('collisionSelect');
collisionSelect.addEventListener('change', handleCollisionSelection);
document.body.append(map);
}

function handleCollisionSelection() {
const selectedIndex = collisionSelect.selectedIndex;
for (const marker of map.getElementsByTagName("gmp-marker-3d")) {
marker.collisionBehavior = collisionSelect.value;
}
}

const positions = [
[-122.3402, 47.6093],
[-122.3402, 47.6094],
[-122.3403, 47.6094],
[-122.3384, 47.6098],
[-122.3389, 47.6095],
[-122.3396, 47.6095],
[-122.3379, 47.6097],
[-122.3378, 47.6097],
[-122.3396, 47.6091],
[-122.3383, 47.6089],
[-122.3379, 47.6093],
[-122.3381, 47.6095],
[-122.3378, 47.6095],
];

init();
const markers = [];

async function init() {
// Request needed libraries.
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");

const map = new Map3DElement({
center: { lat: 47.6094, lng: -122.3390, altitude: 0 },
range: 1000,
mode: MapMode.HYBRID,
});

for (const [lng, lat] of positions) {
const marker = new Marker3DElement({
position: {lat, lng},
// Try setting a different collision behavior here.
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

markers.push(marker)
map.append(marker);
}

document.body.append(map);
}

const positions = [
[-122.3402, 47.6093],
[-122.3402, 47.6094],
[-122.3403, 47.6094],
[-122.3384, 47.6098],
[-122.3389, 47.6095],
[-122.3396, 47.6095],
[-122.3379, 47.6097],
[-122.3378, 47.6097],
[-122.3396, 47.6091],
[-122.3383, 47.6089],
[-122.3379, 47.6093],
[-122.3381, 47.6095],
[-122.3378, 47.6095],
];

init();

const dropdown = document.getElementById('selectElementId');
dropdown.addEventListener('change', drawMap);

function drawMap(event) {
for (const marker of markers) {
marker.collisionBehavior = dropdown.value || google.maps.CollisionBehavior.REQUIRED;
}
}

// [END maps_3d_marker_collision_behavior]
40 changes: 4 additions & 36 deletions samples/3d-marker-collision-behavior/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,40 +16,8 @@ body {
margin: 0;
padding: 0;
}
.textContainer {
background-color: #4d90fe;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
overflow: hidden;
position: absolute;
left: 50%;
bottom: 5px;
transform: translateX(-50%);
border: 1px solid white;
border-radius: 2px;
padding: 5px;
z-index: 1000;
}

.detailsContainer {
background-color: #fff;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
font: 400 18px Roboto, Arial, sans-serif;
overflow: hidden;
position: absolute;
left: 50%;
bottom: 50px;
transform: translateX(-50%);
border: 2px solid #4d90fe;
border-radius: 2px;
padding: 5px;
z-index: 1000;
}

.text {
color: white;
font-size: 1em;
text-align: center;
}
selector {
padding: 2px;
float: right;
}
/* [END maps_3d_marker_collision_behavior] */