import{MarkerClusterer}from"@googlemaps/markerclusterer";asyncfunctioninitMap(){// Request needed libraries.const{Map,InfoWindow}=awaitgoogle.maps.importLibrary("maps")asgoogle.maps.MapsLibrary;const{AdvancedMarkerElement,PinElement}=awaitgoogle.maps.importLibrary("marker")asgoogle.maps.MarkerLibrary;constmap=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{zoom:3,center:{lat:-28.024,lng:140.887},mapId:'DEMO_MAP_ID',});constinfoWindow=newgoogle.maps.InfoWindow({content:"",disableAutoPan:true,});// Create an array of alphabetical characters used to label the markers.constlabels="ABCDEFGHIJKLMNOPQRSTUVWXYZ";// Add some markers to the map.constmarkers=locations.map((position,i)=>{constlabel=labels[i%labels.length];constpinGlyph=newgoogle.maps.marker.PinElement({glyph:label,glyphColor:"white",})constmarker=newgoogle.maps.marker.AdvancedMarkerElement({position,content:pinGlyph.element,});// markers can only be keyboard focusable when they have click listeners// open info window when marker is clickedmarker.addListener("click",()=>{infoWindow.setContent(position.lat+", "+position.lng);infoWindow.open(map,marker);});returnmarker;});// Add a marker clusterer to manage the markers.newMarkerClusterer({markers,map});}constlocations=[{lat:-31.56391,lng:147.154312},{lat:-33.718234,lng:150.363181},{lat:-33.727111,lng:150.371124},{lat:-33.848588,lng:151.209834},{lat:-33.851702,lng:151.216968},{lat:-34.671264,lng:150.863657},{lat:-35.304724,lng:148.662905},{lat:-36.817685,lng:175.699196},{lat:-36.828611,lng:175.790222},{lat:-37.75,lng:145.116667},{lat:-37.759859,lng:145.128708},{lat:-37.765015,lng:145.133858},{lat:-37.770104,lng:145.143299},{lat:-37.7737,lng:145.145187},{lat:-37.774785,lng:145.137978},{lat:-37.819616,lng:144.968119},{lat:-38.330766,lng:144.695692},{lat:-39.927193,lng:175.053218},{lat:-41.330162,lng:174.865694},{lat:-42.734358,lng:147.439506},{lat:-42.734358,lng:147.501315},{lat:-42.735258,lng:147.438},{lat:-43.999792,lng:170.463352},];initMap();
import{MarkerClusterer}from"@googlemaps/markerclusterer";asyncfunctioninitMap(){// Request needed libraries.const{Map,InfoWindow}=awaitgoogle.maps.importLibrary("maps");const{AdvancedMarkerElement,PinElement}=awaitgoogle.maps.importLibrary("marker",);constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:3,center:{lat:-28.024,lng:140.887},mapId:"DEMO_MAP_ID",});constinfoWindow=newgoogle.maps.InfoWindow({content:"",disableAutoPan:true,});// Create an array of alphabetical characters used to label the markers.constlabels="ABCDEFGHIJKLMNOPQRSTUVWXYZ";// Add some markers to the map.constmarkers=locations.map((position,i)=>{constlabel=labels[i%labels.length];constpinGlyph=newgoogle.maps.marker.PinElement({glyph:label,glyphColor:"white",});constmarker=newgoogle.maps.marker.AdvancedMarkerElement({position,content:pinGlyph.element,});// markers can only be keyboard focusable when they have click listeners// open info window when marker is clickedmarker.addListener("click",()=>{infoWindow.setContent(position.lat+", "+position.lng);infoWindow.open(map,marker);});returnmarker;});// Add a marker clusterer to manage the markers.newMarkerClusterer({markers,map});}constlocations=[{lat:-31.56391,lng:147.154312},{lat:-33.718234,lng:150.363181},{lat:-33.727111,lng:150.371124},{lat:-33.848588,lng:151.209834},{lat:-33.851702,lng:151.216968},{lat:-34.671264,lng:150.863657},{lat:-35.304724,lng:148.662905},{lat:-36.817685,lng:175.699196},{lat:-36.828611,lng:175.790222},{lat:-37.75,lng:145.116667},{lat:-37.759859,lng:145.128708},{lat:-37.765015,lng:145.133858},{lat:-37.770104,lng:145.143299},{lat:-37.7737,lng:145.145187},{lat:-37.774785,lng:145.137978},{lat:-37.819616,lng:144.968119},{lat:-38.330766,lng:144.695692},{lat:-39.927193,lng:175.053218},{lat:-41.330162,lng:174.865694},{lat:-42.734358,lng:147.439506},{lat:-42.734358,lng:147.501315},{lat:-42.735258,lng:147.438},{lat:-43.999792,lng:170.463352},];initMap();
/** Always set the map height explicitly to define the size of the div element* that contains the map.*/#map{height:100%;}/** Optional: Makes the sample page fill the window.*/html,body{height:100%;margin:0;padding:0;}
Git and Node.js are required to run this sample locally. Follow theseinstructionsto install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
