Marker Collision Management  |  Maps JavaScript API  |  Google for Developers (original) (raw)

TypeScript

let map: google.maps.Map;

// Initialize and add the map async function initMap(): Promise { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

let markers: google.maps.marker.AdvancedMarkerElement[] = [];

let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;

map = new Map( document.getElementById("map") as HTMLElement, { mapId: "6ff586e93e18149f", center: { lat: 47.609414458375674, lng: -122.33897030353548 }, zoom: 17, } as google.maps.MapOptions );

// @ts-ignore const select = new mdc.select.MDCSelect( document.querySelector(".mdc-select") as HTMLElement );

select.listen("MDCSelect:change", () => { collisionBehavior = select.value; markers.forEach((marker) => { marker.collisionBehavior = collisionBehavior; }); });

select.value = collisionBehavior;

// Create some markers on the map let locations = [ [-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], ];

locations.forEach(([lng, lat]: number[]) => { const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, }); markers.push(advancedMarker); }); }

initMap();

JavaScript

let map;

// Initialize and add the map async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); let markers = []; let collisionBehavior = google.maps.CollisionBehavior.REQUIRED;

map = new Map(document.getElementById("map"), { mapId: "6ff586e93e18149f", center: { lat: 47.609414458375674, lng: -122.33897030353548 }, zoom: 17, });

// @ts-ignore const select = new mdc.select.MDCSelect( document.querySelector(".mdc-select"), );

select.listen("MDCSelect:change", () => { collisionBehavior = select.value; markers.forEach((marker) => { marker.collisionBehavior = collisionBehavior; }); }); select.value = collisionBehavior;

// Create some markers on the map let locations = [ [-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], ];

locations.forEach(([lng, lat]) => { const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });

markers.push(advancedMarker);

}); }

initMap();

CSS

:root { --mdc-theme-primary: #1a73e8; --mdc-theme-secondary: #rgb(225, 245, 254); --mdc-theme-on-primary: #fff; --mdc-theme-on-secondary: rgb(1, 87, 155); }

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label { color: var(--mdc-theme-primary); }

.mdc-select--focused .mdc-select__dropdown-icon { background: url(data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E) no-repeat center; }

.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label { color: var(--mdc-theme-primary); }

/* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

#container { height: 100%; display: flex; }

#sidebar { flex-basis: 15rem; flex-grow: 1; padding: 1rem; max-width: 30rem; height: 100%; box-sizing: border-box; overflow: auto; }

#map { flex-basis: 0; flex-grow: 4; height: 100%; }

.mdc-select, .mdc-select__anchor, .mdc-select__menu { width: 100%; }

HTML

<link
  href="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.min.js"></script>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

<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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>