Google Maps JS API v3 - Simple Multiple Marker Example

文章推薦指數: 80 %
投票人數:10人

Fairly new to the Google Maps Api. I've got an array of data that I want to cycle through and plot on a map. Seems fairly simple, but all the multi-marker ... Resultsfromthe2022DeveloperSurveyarehere. Home Public Questions Tags Users Companies Collectives ExploreCollectives Teams StackOverflowforTeams –Startcollaboratingandsharingorganizationalknowledge. CreateafreeTeam WhyTeams? Teams CreatefreeTeam Collectives™onStackOverflow Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost. Learnmore Teams Q&Aforwork Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch. Learnmore GoogleMapsJSAPIv3-SimpleMultipleMarkerExample AskQuestion Asked 12yearsago Modified 6monthsago Viewed 895ktimes 706 415 FairlynewtotheGoogleMapsApi.I'vegotanarrayofdatathatIwanttocyclethroughandplotonamap.Seemsfairlysimple,butallthemulti-markertutorialsIhavefoundarequitecomplex. Let'susethedataarrayfromGoogle'ssiteforanexample: varlocations=[ ['BondiBeach',-33.890542,151.274856,4], ['CoogeeBeach',-33.923036,151.259052,5], ['CronullaBeach',-34.028249,151.157507,3], ['ManlyBeach',-33.80010128657071,151.28747820854187,2], ['MaroubraBeach',-33.950198,151.259302,1] ]; IsimplywanttoplotallofthesepointsandhaveaninfoWindowpopupwhenclickedtodisplaythename. javascriptgoogle-mapsgoogle-maps-api-3 Share Follow editedOct26,2021at8:31 derloopkat 6,0001515goldbadges3838silverbadges4343bronzebadges askedJun17,2010at5:14 wesboswesbos 25.1k2929goldbadges101101silverbadges142142bronzebadges 0 Addacomment  |  15Answers 15 Sortedby: Resettodefault Highestscore(default) Trending(recentvotescountmore) Datemodified(newestfirst) Datecreated(oldestfirst) 1198 ThisisthesimplestIcouldreduceitto:

GoogleMapsMultipleMarkers varlocations=[ ['BondiBeach',-33.890542,151.274856,4], ['CoogeeBeach',-33.923036,151.259052,5], ['CronullaBeach',-34.028249,151.157507,3], ['ManlyBeach',-33.80010128657071,151.28747820854187,2], ['MaroubraBeach',-33.950198,151.259302,1] ]; varmap=newgoogle.maps.Map(document.getElementById('map'),{ zoom:10, center:newgoogle.maps.LatLng(-33.92,151.25), mapTypeId:google.maps.MapTypeId.ROADMAP }); varinfowindow=newgoogle.maps.InfoWindow(); varmarker,i; for(i=0;i 👨‍💻Edit/forkonaCodepen→ SCREENSHOT ThereissomeclosuremagichappeningwhenpassingthecallbackargumenttotheaddListenermethod.Thiscanbequiteatrickytopicifyouarenotfamiliarwithhowclosureswork.IwouldsuggestcheckingoutthefollowingMozillaarticleforabriefintroductionifitisthecase: ❯MozillaDevCenter:WorkingwithClosures Share Follow editedOct26,2021at17:00 jpoehnelt 2,28611goldbadge1515silverbadges2020bronzebadges answeredJun17,2010at5:36 DanielVassalloDanielVassallo 327k7171goldbadges496496silverbadges437437bronzebadges 7 4 @RaphaelDDL:Yesthoseparenthesisareneededtoactuallyinvokethenamelessfunction.TheargumentsneedtobepassedbecauseofthewayJavaScriptworks(becauseofclosures).Seemyanswertothisquestionforanexampleandmoreinfo:stackoverflow.com/a/2670420/222908 – DanielVassallo Jul11,2012at22:07 Goodanswer,butitcouldbesimplifiedfurther.SincesinceallmarkerswillhaveindividualInfoWindowsandsinceJavaScriptdoesn'tcareifyouaddextrapropertiestoanobject,allyouneedtodoisaddanInfoWindowtotheMarker'spropertiesandthencallthe.open()ontheInfoWindowfromitself.Iwouldhavepostedthechangehere,butitthemodificationswerelargeenoughthatIpostedmyownanswer. – MatthewCordaro Jun30,2016at3:08 WhynotusenewMarkerClusterer()formassiveperformancebust?CheckoutChirsSwiresanswer. – DevWL Jul19,2019at1:21 hi@DanielVassallo,itoohavesamerequiremntofdisplayingmultiplemarkersinmyionicangularproject.pleaseassistme,ialreadyaskedaquestiononstackoverflow.hereisthequestionlink:stackoverflow.com/questions/57985967/… – Shaik Sep21,2019at12:57 1 Itworks.Thanks.Howwillyouremovemarkersfromgooglemapbecauseyouareusingsingleinstanceofmarkerandinitializeinloop.Pleaseshareyourthoughts. – Kamlesh Dec1,2019at5:06  |  Show2morecomments 64 HereisanotherexampleofmultiplemarkersloadingwithauniquetitleandinfoWindowtext.TestedwiththelatestgooglemapsAPIV3.11. MultipleMarkersGoogleMaps //checkDOMReady $(document).ready(function(){ //execute (function(){ //mapoptions varoptions={ zoom:5, center:newgoogle.maps.LatLng(39.909736,-98.522109),//centeredUS mapTypeId:google.maps.MapTypeId.TERRAIN, mapTypeControl:false }; //initmap varmap=newgoogle.maps.Map(document.getElementById('map_canvas'),options); //NYandCAsampleLat/Lng varsouthWest=newgoogle.maps.LatLng(40.744656,-74.005966); varnorthEast=newgoogle.maps.LatLng(34.052234,-118.243685); varlngSpan=northEast.lng()-southWest.lng(); varlatSpan=northEast.lat()-southWest.lat(); //setmultiplemarker for(vari=0;i<250;i++){ //initmarkers varmarker=newgoogle.maps.Marker({ position:newgoogle.maps.LatLng(southWest.lat()+latSpan*Math.random(),southWest.lng()+lngSpan*Math.random()), map:map, title:'ClickMe'+i }); //processmultipleinfowindows (function(marker,i){ //addclickevent google.maps.event.addListener(marker,'click',function(){ infowindow=newgoogle.maps.InfoWindow({ content:'Hello,World!!' }); infowindow.open(map,marker); }); })(marker,i); } })(); }); Screenshotof250Markers: ItwillautomaticallyrandomizetheLat/Lngtomakeitunique.Thisexamplewillbeveryhelpfulifyouwanttotest500,1000,xxxmarkersandperformance. Share Follow editedSep25,2017at21:03 CommunityBot 111silverbadge answeredMar8,2013at18:30 MadanSapkotaMadanSapkota 23.4k1111goldbadges111111silverbadges115115bronzebadges 6 1 Becarefulwhenpostingcopyandpasteboilerplate/verbatimanswerstomultiplequestions,thesetendtobeflaggedas"spammy"bythecommunity.Ifyou'redoingthisthenitusuallymeansthequestionsareduplicatessoflagthemassuchinstead. – Kev Mar9,2013at23:43 1 ThiswillgetmanypopupinfoWindowforeachmarkerandwon'thidetheotherinfoWindowifit'scurrentlyshown.it'sreallyhelpful:) – Kannika Mar27,2014at3:30 @Anup,ifyoujustreadthequestionandcommentitwouldbebetter.thequestionisasking"exampleformultiplemarker"whetheritisrandomoryourownblabla. – MadanSapkota Jun29,2015at13:39 AgainwhynotusenewMarkerClusterer()formassiveperformancebust?CheckoutChirsSwiresanswer. – DevWL Jul19,2019at1:24 1 @DevWL,itwasansweredbackin2013.Youarefreetoupdate. – MadanSapkota Jul21,2019at3:10  |  Show1morecomment 41 IthoughtIwouldputthishereasitappearstobeapopularlandingpointforthosestartingtouseGoogleMapsAPI's.Multiplemarkersrenderedontheclientsideisprobablythedownfallofmanymappingapplicationsperformancewise.Itisdifficulttobenchmark,fixandinsomecasesevenestablishthereisanissue(duetobrowserimplementationdifferences,hardwareavailabletotheclient,mobiledevices,thelistgoeson). Thesimplestwaytobegintoaddressthisissueistouseamarkerclusteringsolution.Thebasicideaistogroupgeographicallysimilarlocationsintoagroupwiththenumberofpointsdisplayed.Astheuserzoomsintothemapthesegroupsexpandtorevealindividualmarkersbeneath. Perhapsthesimplesttoimplementisthemarkerclustererlibrary.Abasicimplementationwouldbeasfollows(afterlibraryimports): functioninitialize(){ varcenter=newgoogle.maps.LatLng(37.4419,-122.1419); varmap=newgoogle.maps.Map(document.getElementById('map'),{ zoom:3, center:center, mapTypeId:google.maps.MapTypeId.ROADMAP }); varmarkers=[]; for(vari=0;i<100;i++){ varlocation=yourData.location[i]; varlatLng=newgoogle.maps.LatLng(location.latitude, location.longitude); varmarker=newgoogle.maps.Marker({ position:latLng }); markers.push(marker); } varmarkerCluster=newMarkerClusterer({map,markers}); } google.maps.event.addDomListener(window,'load',initialize); Themarkersinsteadofbeingaddeddirectlytothemapareaddedtoanarray.Thisarrayisthenpassedtothelibrarywhichhandlescomplexcalculationforyouandattachedtothemap. NotonlydotheseimplementationsmassivelyincreaseclientsideperformancebuttheyalsoinmanycasesleadtoasimplerandlessclutteredUIandeasierdigestionofdataonlargerscales. OtherimplementationsareavailablefromGoogle. Hopethisaidssomeofthosenewertothenuancesofmapping. Share Follow editedOct27,2021at11:36 jpoehnelt 2,28611goldbadge1515silverbadges2020bronzebadges answeredJan29,2014at12:02 ChrisSwiresChrisSwires 2,70311goldbadge1414silverbadges2727bronzebadges 3 2 Thanks,abigbighelp!Thereisanorderormagnitudedifferenceinperformance,bymakingthegoogle.mapdatapointsfirstandthenpassingittothemappinglibrary,inthiscaseMarketClustertoplot.withabout150,000datapointsthefirstpostby'DanielVassallo'tookabout2minstoload,this5seconds.Thanksabunch'Swires'! – Waqas Apr15,2014at15:11 1 Ithoughtthiswouldbeagoodplaceforthis,IwouldimaginemostpeoplesfirstlandingonstackwhenrelatedtoGooglemapsisthispage,andtheresecondis'whydoesmymaptakesolongtoload'. – ChrisSwires Jun25,2014at10:51 @Monicit'swhateveryourdatasetis,it'sjustaplaceholdervariable. – ChrisSwires Mar31,2015at8:39 Addacomment  |  22 Asynchronousversion: functioninitialize(){ varlocations=[ ['BondiBeach',-33.890542,151.274856,4], ['CoogeeBeach',-33.923036,151.259052,5], ['CronullaBeach',-34.028249,151.157507,3], ['ManlyBeach',-33.80010128657071,151.28747820854187,2], ['MaroubraBeach',-33.950198,151.259302,1] ]; varmap=newgoogle.maps.Map(document.getElementById('map'),{ zoom:10, center:newgoogle.maps.LatLng(-33.92,151.25), mapTypeId:google.maps.MapTypeId.ROADMAP }); varinfowindow=newgoogle.maps.InfoWindow(); varmarker,i; for(i=0;i Share Follow answeredJun6,2014at12:58 sHaDeoNeRsHaDeoNeR 54722goldbadges77silverbadges1414bronzebadges 1 Itested,butnotworkforme.WorkedwhenIusedGoogleMarkerAccessibility – EduardoLeffaAbrantes May4at13:59 Addacomment  |  15 vararr=newArray(); functioninitialize(){ vari; varLocations=[ { lat:48.856614, lon:2.3522219000000177, address:'Paris', gval:'25.5', aType:'Non-Commodity', title:'Paris', descr:'Paris' }, { lat:55.7512419, lon:37.6184217, address:'Moscow', gval:'11.5', aType:'Non-Commodity', title:'Moscow', descr:'MoscowAirport' }, { lat:-9.481553000000002, lon:147.190242, address:'PortMoresby', gval:'1', aType:'Oil', title:'PapuaNewGuinea', descr:'PapuaNewGuinea123123123' }, { lat:20.5200, lon:77.7500, address:'Indore', gval:'1', aType:'Oil', title:'Indore,India', descr:'AirportIndia' } ]; varmyOptions={ zoom:2, center:newgoogle.maps.LatLng(51.9000,8.4731), mapTypeId:google.maps.MapTypeId.ROADMAP }; varmap=newgoogle.maps.Map(document.getElementById("map"),myOptions); varinfowindow=newgoogle.maps.InfoWindow({ content:'' }); for(i=0;i"+Locations[i].descr+"",Locations[i].title); } } functionbindInfoWindow(marker,map,infowindow,html,Ltitle){ google.maps.event.addListener(marker,'mouseover',function(){ infowindow.setContent(html); infowindow.open(map,marker); }); google.maps.event.addListener(marker,'mouseout',function(){ infowindow.close(); }); } Fullworkingexample.Youcanjustcopy,pasteanduse. Share Follow editedSep25,2017at20:57 CommunityBot 111silverbadge answeredOct17,2013at7:14 AnupAnup 3,20511goldbadge2626silverbadges3737bronzebadges 0 Addacomment  |  12 FromGoogleMapAPIsamples: functioninitialize(){ varmyOptions={ zoom:10, center:newgoogle.maps.LatLng(-33.9,151.2), mapTypeId:google.maps.MapTypeId.ROADMAP } varmap=newgoogle.maps.Map(document.getElementById("map_canvas"), myOptions); setMarkers(map,beaches); } /** *Dataforthemarkersconsistingofaname,aLatLngandazIndexfor *theorderinwhichthesemarkersshoulddisplayontopofeach *other. */ varbeaches=[ ['BondiBeach',-33.890542,151.274856,4], ['CoogeeBeach',-33.923036,151.259052,5], ['CronullaBeach',-34.028249,151.157507,3], ['ManlyBeach',-33.80010128657071,151.28747820854187,2], ['MaroubraBeach',-33.950198,151.259302,1] ]; functionsetMarkers(map,locations){ //Addmarkerstothemap //MarkersizesareexpressedasaSizeofX,Y //wheretheoriginoftheimage(0,0)islocated //inthetopleftoftheimage. //Origins,anchorpositionsandcoordinatesofthemarker //increaseintheXdirectiontotherightandin //theYdirectiondown. varimage=newgoogle.maps.MarkerImage('images/beachflag.png', //Thismarkeris20pixelswideby32pixelstall. newgoogle.maps.Size(20,32), //Theoriginforthisimageis0,0. newgoogle.maps.Point(0,0), //Theanchorforthisimageisthebaseoftheflagpoleat0,32. newgoogle.maps.Point(0,32)); varshadow=newgoogle.maps.MarkerImage('images/beachflag_shadow.png', //Theshadowimageislargerinthehorizontaldimension //whilethepositionandoffsetarethesameasforthemainimage. newgoogle.maps.Size(37,32), newgoogle.maps.Point(0,0), newgoogle.maps.Point(0,32)); //Shapesdefinetheclickableregionoftheicon. //ThetypedefinesanHTML<area>element'poly'which //tracesoutapolygonasaseriesofX,Ypoints.Thefinal //coordinateclosesthepolybyconnectingtothefirst //coordinate. varshape={ coord:[1,1,1,20,18,20,18,1], type:'poly' }; for(vari=0;i{ constmapEl=$('#our_map').get(0);//ORdocument.getElementById('our_map'); //Displayamaponthepage constmap=newgoogle.maps.Map(mapEl,{mapTypeId:'roadmap'}); constbuildings=[ { title:'LondonEye,London', coordinates:[51.503454,-0.119562], info:'carousel' }, { title:'PalaceofWestminster,London', coordinates:[51.499633,-0.124755], info:'palace' } ]; placeBuildingsOnMap(buildings,map); }); constplaceBuildingsOnMap=(buildings,map)=>{ //Loopthroughourarrayofbuildings&placeeachoneonthemap constbounds=newgoogle.maps.LatLngBounds(); buildings.forEach((building)=>{ constposition={lat:building.coordinates[0],lng:building.coordinates[1]} //Stretchourboundstothenewlyfoundmarkerposition bounds.extend(position); constmarker=newgoogle.maps.Marker({ position:position, map:map, title:building.title }); constinfoWindow=newgoogle.maps.InfoWindow(); //Alloweachmarkertohaveaninfowindow google.maps.event.addListener(marker,'click',()=>{ infoWindow.setContent(building.info); infoWindow.open(map,marker); }) //Automaticallycenterthemapfittingallmarkersonthescreen map.fitBounds(bounds); }) }) Share Follow editedApr3,2018at14:48 answeredNov26,2016at1:34 EvgeniaKarunusEvgeniaKarunus 10.1k55goldbadges5454silverbadges6969bronzebadges Addacomment  |  6 Addamarkerinyourprogramisveryeasy.Youjustmayaddthiscode: varmarker=newgoogle.maps.Marker({ position:myLatLng, map:map, title:'HelloWorld!' }); Thefollowingfieldsareparticularlyimportantandcommonlysetwhenyouconstructamarker: position(required)specifiesaLatLngidentifyingtheinitiallocationofthemarker.OnewayofretrievingaLatLngisbyusingtheGeocodingservice. map(optional)specifiestheMaponwhichtoplacethemarker.Ifyoudonotspecifyamaponconstructionofthemarker,themarkeriscreatedbutisnotattachedto(ordisplayedon)themap.Youmayaddthemarkerlaterbycallingthemarker'ssetMap()method. Note,intheexample,thetitlefieldsetthemarker'stitlewhowillappearasatooltip. YoumayconsulttheGoogleapidocumenationhere. Thisisacompleteexampletosetonemarkerinamap.Becarefull,youhavetoreplaceYOUR_API_KEYbyyourgoogleAPIkey: Simplemarkers Now,ifyouwanttoplotmarkersofanarrayinamap,youshoulddolikethis: varlocations=[ ['BondiBeach',-33.890542,151.274856,4], ['CoogeeBeach',-33.923036,151.259052,5], ['CronullaBeach',-34.028249,151.157507,3], ['ManlyBeach',-33.80010128657071,151.28747820854187,2], ['MaroubraBeach',-33.950198,151.259302,1] ]; functioninitMap(){ varmyLatLng={lat:-33.90,lng:151.16}; varmap=newgoogle.maps.Map(document.getElementById('map'),{ zoom:10, center:myLatLng }); varcount; for(count=0;count Infowindows Normally,youshouldhavethisresult: Share Follow editedJun8,2018at19:09 answeredApr12,2017at5:54 SphynxTechSphynxTech 1,71922goldbadges1717silverbadges3535bronzebadges 0 Addacomment  |  6 SourceLink DemoLink CompleteHTMLcode ShowInfoWindowonClickorHover. OnlyoneInfoWindowwillbeshown

MyGoogleMapsDemo

Share Follow editedFeb19,2019at9:26 answeredFeb19,2019at9:19 CodeSpyCodeSpy 8,86044goldbadges6262silverbadges4444bronzebadges 2 1 ThankyouforthecloseOtherInfo,Icouldn'tfindadecentsolutiontoworkwithmerkerclusteruntilyouranswer.:) – chrisloughnane Sep3,2019at10:12 1 Nowthat'swhatsIwaslookingfor.Thanksmanworkgreatin2020 – FaizanAnwerAliRupani Jan26,2020at8:47 Addacomment  |  4 FollowingfromDanielVassallo'sanswer,hereisaversionthatdealswiththeclosureissueinasimplerway. SincesinceallmarkerswillhaveanindividualInfoWindowandsinceJavaScriptdoesn'tcareifyouaddextrapropertiestoanobject,allyouneedtodoisaddanInfoWindowtotheMarker'spropertiesandthencallthe.open()ontheInfoWindowfromitself! Edit:Withenoughdata,thepageloadcouldtakealotoftime,soratherthanconstructiontheInfoWindowwiththemarker,theconstructionshouldhappenonlywhenneeded.NotethatanydatausedtoconstructtheInfoWindowmustbeappendedtotheMarkerasaproperty(data).Alsonotethatafterthefirstclickevent,infoWindowwillpersistasapropertyofit'smarkersothebrowserdoesn'tneedtoconstantlyreconstruct. varlocations=[ ['BondiBeach',-33.890542,151.274856,4], ['CoogeeBeach',-33.923036,151.259052,5], ['CronullaBeach',-34.028249,151.157507,3], ['ManlyBeach',-33.80010128657071,151.28747820854187,2], ['MaroubraBeach',-33.950198,151.259302,1] ]; varmap=newgoogle.maps.Map(document.getElementById('map'),{ center:newgoogle.maps.LatLng(-33.92,151.25) }); for(i=0;i MyGoogleMap

MyGoogleMap`

Share Follow answeredDec19,2020at20:04 namalwijekoonnamalwijekoon 9144bronzebadges Addacomment  |  2 HereisanearlycompleteexamplejavascriptfunctionthatwillallowmultiplemarkersdefinedinaJSONObject. Itwillonlydisplaythemarkersthatarewithintheboundsofthemap. Thisisimportantsoyouarenotdoingextrawork. Youcanalsosetalimittothemarkerssoyouarenotshowinganextremeamountofmarkers(ifthereisapossibilityofathinginyourusage); itwillalsonotdisplaymarkersifthecenterofthemaphasnotchangedmorethan500meters. Thisisimportantbecauseifauserclicksonthemarkerandaccidentallydragsthemapwhiledoingsoyoudon'twantthemaptoreloadthemarkers. Iattachedthisfunctiontotheidleeventlistenerforthemapsomarkerswillshowonlywhenthemapisidleandwillredisplaythemarkersafteradifferentevent. Inactionscreenshot thereisalittlechangeinthescreenshotshowingmorecontentintheinfowindow. pastedfrompastbin.com Share Follow editedSep4,2016at16:43 answeredSep4,2016at16:01 ThunderstickThunderstick 1,1071313silverbadges1111bronzebadges Addacomment  |  0 HereisanexampleofmultiplemarkersinReactjs. Belowisthemapcomponent importReactfrom'react'; importPropTypesfrom'prop-types'; import{Map,InfoWindow,Marker,GoogleApiWrapper}from'google-maps-react'; constMapContainer=(props)=>{ const[mapConfigurations,setMapConfigurations]=useState({ showingInfoWindow:false, activeMarker:{}, selectedPlace:{} }); varpoints=[ {lat:42.02,lng:-77.01}, {lat:42.03,lng:-77.02}, {lat:41.03,lng:-77.04}, {lat:42.05,lng:-77.02} ] constonMarkerClick=(newProps,marker)=>{}; if(!props.google){ return
Loading...
; } return( {points.map(coordinates=>( ))}

{mapConfigurations.selectedPlace.name}

); }; exportdefaultGoogleApiWrapper({ apiKey:process.env.GOOGLE_API_KEY, v:'3' })(MapContainer); MapContainer.propTypes={ google:PropTypes.shape({}).isRequired, }; Share Follow answeredFeb3,2020at2:42 AkoladeAdesanmiAkoladeAdesanmi 1,05499silverbadges1515bronzebadges Addacomment  |  0 Therecentsimplestaftermodificationincurrentmapmarkersandclustereralgorithm: Modificationon:https://developers.google.com/maps/documentation/javascript/marker-clustering App #map{ height:500 } functioninitMap(){ maps=newgoogle.maps.Map(document.getElementById('map'),{ center:newgoogle.maps.LatLng(12.9824855,77.637094), zoom:5, disableDefaultUI:false, mapTypeId:google.maps.MapTypeId.HYBRID }); varlabels='ABCDEFGHIJKLMNOPQRSTUVWXYZ'; varmarkerImage='http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png'; marker=locations.map(function(location,i){ returnnewgoogle.maps.Marker({ position:newgoogle.maps.LatLng(location.lat,location.lng), map:maps, title:"Map", label:labels[i%labels.length], icon:markerImage }); }); varmarkerCluster=newMarkerClusterer(maps,marker,{ imagePath:'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' }); } varlocations=[ {lat:12.9824855,lng:77.637094}, {lat:11.9824855,lng:77.154312}, {lat:12.8824855,lng:77.637094}, {lat:10.8824855,lng:77.054312}, {lat:12.9824855,lng:77.637094}, {lat:11.9824855,lng:77.154312}, {lat:12.8824855,lng:77.637094}, {lat:13.8824855,lng:77.054312}, {lat:14.9824855,lng:54.637094}, {lat:15.9824855,lng:54.154312}, {lat:16.8824855,lng:53.637094}, {lat:17.8824855,lng:52.054312}, {lat:18.9824855,lng:51.637094}, {lat:19.9824855,lng:69.154312}, {lat:20.8824855,lng:68.637094}, {lat:21.8824855,lng:67.054312}, {lat:12.9824855,lng:76.637094}, {lat:11.9824855,lng:75.154312}, {lat:12.8824855,lng:74.637094}, {lat:10.8824855,lng:74.054312}, {lat:12.9824855,lng:73.637094}, {lat:3.9824855,lng:72.154312}, {lat:2.8824855,lng:71.637094}, {lat:1.8824855,lng:70.054312} ]; Share Follow editedDec16,2021at13:50 rekire 46.3k2929goldbadges163163silverbadges257257bronzebadges answeredJul17,2020at18:38 Ank_247shbmAnk_247shbm 42466silverbadges1717bronzebadges Addacomment  |  Highlyactivequestion.Earn10reputation(notcountingtheassociationbonus)inordertoanswerthisquestion.Thereputationrequirementhelpsprotectthisquestionfromspamandnon-answeractivity. Nottheansweryou'relookingfor?Browseotherquestionstaggedjavascriptgoogle-mapsgoogle-maps-api-3oraskyourownquestion. TheOverflowBlog ExpertsfromStripeandWaymoexplainhowtocraftgreatdocumentation(Ep.455) Askedandanswered:theresultsforthe2022Developersurveyarehere! FeaturedonMeta AnnouncingthearrivalofValuedAssociate#1214:Dalmarus Testingnewtrafficmanagementtool AskWizardTestResultsandNextSteps Trending:Anewanswersortingoption Linked 10 Googlemapsmultiplemarkerswithmultipleuniqueinfoboxes 2 GoogleMapsAPIv3-Howto"alert"markerIDwhenmarkerisclicked 3 Howtoshowtooltiponeachgooglemapmarker 2 GoogleMapsAPI3-InfoWindowIssue 2 GoogleMapsAPImarkerclickeventnotfiring 0 howcanweaddmultiplemarkerwithclickeventingooglemap? 1 OpeningwronginfowindowGoogleMapsv3 -1 Googlemapsmarkerseventlistenerclick 2 JavascriptGooglemap,showpinsbylongitudeandlatitudecoordinates -1 DynamiclistenerinjavascriptGoogleMapsAPI Seemorelinkedquestions Related 3124 JavaScriptclosureinsideloops–simplepracticalexample 441 GoogleMapsAPIv3:Howtoremoveallmarkers? 569 HowtodisablemousescrollwheelscalingwithGoogleMapsAPI 134 HowtotriggertheonclickeventofamarkeronaGoogleMapsV3? 59 triggergooglemapsmarkerclick 295 GoogleMapsAPI3-Custommarkercolorfordefault(dot)marker 250 Auto-centermapwithmultiplemarkersinGoogleMapsAPIv3 HotNetworkQuestions Doestheuseoffrontsuspensionnegativelyaffectroadridingefficiency? Howcandemocracynotbetheruleofthepoor? Howfarfrombinary? HowdidTgetintotheagency? TowhatextentareEnglandandWalesonecompletelyweddedjurisdiction? Whycan'tanMCU'sGPIOpinsdirectlycontrolpowerMOSFETs? WhatisthepurposeofthefuelpumpsintheA320? Aremidi-chloriansstillcanon,despitenotbeingmentionedsinceEpisode1? Whatdoes"ifinlocation"contextmeaninNginx? Whataresomepossiblereasonsthataheatingoilrepwouldbeanticipatingoilpricesfalling? Findthewalls! WhichUSGovernmentAgencywouldhandlethecoverupofanewmineralfoundonadifferentplanet? CanIasktobeconsideredforanotheropeninginsamegroup? Arechemicalsusedtoripenfruitindevelopingcountriesharmfultothehealthofconsumers? Howdoes/procinteractwithPIDnamespaces? Ifaplayercastsaspellofunlimiteddurationandretrainsoutofit,doesthespellremainactive? DC/DCConverternotoutputtingthecorrectvoltage Animatingasolarsystem:'childof'constraintresetsafter180°rotationwheninfluenceislowerthan1 PartofapolygonthatisclosertopointAthanpointB Whyusedecltypeonatemplateargument? Addingnoisetonon-negativeimputeddata HowdoIconveythatIambadatrememberingthings? Assemblermadeinassembly Howtopolitelycoexistwithavampire? morehotquestions Questionfeed SubscribetoRSS Questionfeed TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader. lang-js Yourprivacy Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy. Acceptallcookies Customizesettings  


請為這篇文章評分?