title: Googlemaps API loads slow with many markers
body: <p>Im trying to load around 600 googlemap markers on page load using the function addMarker.</p>
  
  <p>The page takes a lot of time to load.</p>
  
  <p>Is there anything I can do to make it load faster while keep using the addMarker function?</p>
  
  <p>Thanks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var map
  var myLatlng = new google.maps.LatLng(35.9531719,14.3712201);
  var markerBounds = new google.maps.LatLngBounds();
  var markers = {};
   
  function HomeControl(controlDiv, map) 
  {
   google.maps.event.addDomListener(zoomout, "click", function() {
    
      var currentZoomLevel = map.getZoom();
      if(currentZoomLevel != 0)
      {
     map.setZoom(currentZoomLevel - 1);
      }     
   });
   
   google.maps.event.addDomListener(zoomin, "click", function() {
    
      var currentZoomLevel = map.getZoom();
      if(currentZoomLevel != 21)
      {
     map.setZoom(currentZoomLevel + 1);
      }
   });
  }
  
  function initialize() 
  {
    var googleMapOptions = {
      center: new google.maps.LatLng(35.9531719,14.3712201),
   zoom: 11,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   zoomControl: false,
   streetViewControl: false,
   panControl: false,
   draggable: true
    };
  
    map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
    
     google.maps.event.addListener(map, "idle", function() {
      addMarker(latitude,longitude,id,'Title','url');
     }); 
    
    var homeControlDiv = document.createElement("div");
    var homeControl = new HomeControl(homeControlDiv, map);
  }
  
   var infowindow = new google.maps.InfoWindow({
       content: ""
   });
  
   function addMarker(lat,long,id,desc,url) 
   { 
   var myIcon = new google.maps.MarkerImage("/images/pips/"+id+".png", null, null, null, new google.maps.Size(28,38));
   
      var myLatlng = new google.maps.LatLng(lat,long);
  
   var marker = new google.maps.Marker({
    map: map,
    title: desc,
    position: myLatlng,
    icon: myIcon,      
    id: id
   });
   
   google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent('&lt;a href="' + url + '"&gt;' + desc + '&lt;/a&gt;');
    infowindow.setPosition(marker.getPosition());
    infowindow.open(map, marker); 
   });
   
   markers[id] = marker;
  
   markerBounds.extend(myLatlng);
   
   google.maps.event.addListener(marker, "click", function() {
    infowindow.open(map,marker);
   });
   } 
   
   google.maps.event.addDomListener(window, "load", initialize);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>