Geek asks and answers

Google Map loads more than 1000 non-responsive browser markers

I am new to Google maps, I draw gps data on a Google map, it works fine up to 500 points. If the data exceeds 500, it slows down if there is any alternative way to overlay markers on the map.

I just mark the gps data on a google map for a certain period of time.

Later I need to display hundreds of thousands of gps data on a Google map, below the method slows down and exits firefox or chrome (time is running out).

How to build more data on a Google map as well as quickly

My javascript code, sales data will have json data:

 function show_map_all_data(sale_data)
    {
 init_map();
    var count_actual=sale_data.length;
    var locations=[];

                for (var i=0;i<count_actual;i++)
        {
                var temp=[]
                temp.push(sale_data[i]['GPS_latitude'],sale_data[i]['GPS_longitude'])
                locations.push(temp);
                }
//console.log(locations);

   var infowindow = new google.maps.InfoWindow();

    var marker, i;
    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][0], locations[i][1]),
          icon: {
          path: google.maps.SymbolPath.CIRCLE,
                strokeColor: '#8e2014',
                scale: 4,
                strokeOpacity: 1.0,
              strokeWeight: 10,
              fillColor: '#8e2014',
              animation: google.maps.Animation.DROP,
    },
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0] + "," + locations[i][1]);
          infowindow.open(map, marker);
        }
      })(marker, i));

    }

    }
+3
source share
1 answer

, , markerclustering, ( -). , , , . , (- , , , , ).

- . , . , , .

, markerclusterer. ( , ):

<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

. , .

, .

Google.

: http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/reference.html maxZoom, , , .

+1

More articles:


All Articles