Organizational Research By

Surprising Reserch 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
133 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

...