Fahad Kazmi Fahad Kazmi - 3 months ago 8
Javascript Question

GMaps - placing more than 100 markers

I am using

gmaps
in my website and want to place more then hundred of markers in
google maps
to show users location. Can it break down the connection or slow down the speed of my website when accessing all of these marker through
json
data. As these markers data stored in
array
file.

var values = [
{"lat" : "51.508742", "ln" : "-0.120850", "name" : "a new user" },
{"lat" : "51.508742", "ln" : "-0.320850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-0.420850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-0.520850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-0.620850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-0.720850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-0.820850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-0.920850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-1.320850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-2.320850" , "name" : "my corporation"},
{"lat" : "51.508742", "ln" : "-3.320850" , "name" : "my corporation"}
]


And I am accessing them as:

var myCenter=new google.maps.LatLng(values[0]["lat"],values[0]['ln']);



function initialize()
{
var marker;
function callMe(v,i){
marker=new google.maps.Marker({
position: new google.maps.LatLng(values[i]["lat"],values[i]['ln']) ,
});
marker.setMap(map);
}
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

values.forEach(callMe);


}

google.maps.event.addDomListener(window, 'load', initialize);


Can I show all of these markers concurrently or should I limit them for performance?

Answer

You should limit the number of markers. But this isn't a limitation on JSON. It's a factor of web performance and visual overload.

From Google:

Some applications are required to display a large number of locations or markers. Naively plotting thousands of markers on a map can quickly lead to a degraded user experience. Too many markers on the map cause both visual overload and sluggish interaction with the map. To overcome this poor performance, the information displayed on the map needs to be simplified.

Google suggests the following methods to assist with limiting the number of markers displayed at one time:

  1. Grid-based Clustering
  2. Distance-based Clustering
  3. Viewport Marker Management
  4. Fusion Tables
  5. MarkerClusterer
  6. MarkerManager
Comments