Organizational Research By

Surprising Reserch Topic

Experts Most Trusted Topic


Simple Multiple Marker Example of Google Maps JS API v3


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 tutorials I have found are quite complex.

Lets use the data array from google's site for an example:

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 151.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.259302, 1]
];
I simply want to plot all of these points and have an infoWindow pop up when clicked to display the name.

asked May 26, 2015 in JAVASCRIPT by rajesh
0 votes
131 views



Related Hot Questions



Government Jobs Opening




  


  


Screenshot:

Google Maps Multiple Markers

There is some closure magic happening when passing the callback argument to the addListener method. This can be quite a tricky topic, if you are not familiar with how closures work. I would suggest checking out the following Mozilla article for a brief introduction, if it is the case:
answered May 26, 2015 by rajesh
0 votes

Here is another example of Multiple Markers Loading with unique title and infoWindow text. Tested with Latest Google Maps API V3.11



   
       
       
        Multiple Markers Google Maps
        " rel="nofollow" target="_blank">http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
       
       
   
   
       


   

Screenshot of 250 Markers

Google Maps API V3.11 with Multiple Markers

It will automatically randomize the Lat/Lng to make unique. Example will be very helpful if you want to test 500, 1000, xxx markers and performance.

answered May 26, 2015 by rajesh

...