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){
returnLoading...
;
}
return(
);
};
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