Google map load more than 1000 markers browser not responding

I am new to Google maps, I am plotting the gps data onto a Google map, it works fine up to 500 points. If the data exceeds more than 500 it slows down is there any alternate way to plot markers onto a map.

I am just marking the gps data in Google map on certain time period.

Later I need to plot hundreds of thousands of gps data in Google map,below method slows down and exit the firefox or chrome (it times out).

How to plot more data on google map and also it should be fast

My javascript code, sale data will be of 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));

    }

    }

You'll likely need to look into markerclustering in order to speed up your page load times (and avoid time out). Multiple markers rendered on the client side is probably the downfall of many mapping applications performance wise. It is difficult to benchmark, fix and in some cases even establish there is an issue (due to browser implementation differences, hardware available to the client, mobile devices, the list goes on).

The simplest way to begin to address this issue is to use a marker clustering solution. The basic idea is to group geographically similar locations into a group with the number of points displayed. As the user zooms into the map these groups expand to reveal individual markers beneath.

Perhaps the simplest to implement is the markerclusterer library. A basic implementation would be as follows (after library imports, and not reflective of your code, this is just the simplest example I could come up with):

<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>

The markers instead of being added directly to the map are added to an array. This array is then passed to the library which handles complex calculation for you and attached to the map.

Not only do these implementations massively increase client side performance but they also in many cases lead to a simpler and less cluttered UI and easier digestion of data on larger scales.

Other implementations are available from Google.

Edit to answer comment

If you look here: http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/docs/reference.html and look for a property called maxZoom you can set a zoom level in the clusterer options object after which the clustering will be turned off to allow all markers to be plotted.