title: Google map api takes long time to load
body: <p>I know my question is duplicate. But I need the exact answer. I have used the below js for google map api and perfectly works fine on my site but it takes so much time to load.On my site I am showing 100 markers on google map.</p>
  
  <pre><code>&lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>So can anyone tell me how can I improve the speed of my page.</p>
  
  <p>thanks</p>
  
  <p>Edit</p>
  
  <pre><code>function initialize() {
      var secheltLoc = new google.maps.LatLng(43.265305424381985, -88.81882460937499),
          markers,
          myMapOptions = {
              zoom: 7,
              center: secheltLoc,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              panControl: true,
              zoomControl: true,
  
          },
  
          map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);
      var bounds = new google.maps.LatLngBounds();
  
      function initMarkers(map, markerData) {
          var newMarkers = [],
              marker;
  
          for (var i = 0; i &lt; markerData.length; i++) {
              var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]);
              bounds.extend(pos);
              marker = new google.maps.Marker({
                  map: map,
                  draggable: false,
                  position: markerData[i].latLng,
                  animation: google.maps.Animation.DROP,
                  icon: markerData[i].logo
              }),
                  boxText = document.createElement("div");
  
  
              infoboxOptions = {
                  content: boxText,
                  disableAutoPan: true,
                  maxWidth: 0,
                  pixelOffset: new google.maps.Size(-140, 0),
                  zIndex: null,
                  boxStyle: {
                      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
  
                      width: "450px"
                  },
                  closeBoxMargin: "12px 4px 2px 2px",
                  closeBoxURL: "",
                  infoBoxClearance: new google.maps.Size(1, 1),
                  isHidden: false,
                  pane: "floatPane",
                  enableEventPropagation: false
              };
  
              newMarkers.push(marker);
              //define the text and style for all infoboxes
              boxText.style.cssText = "border: 1px solid #333; margin-top: 8px; background:white; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;height:100px; width:350px;";
              boxText.innerHTML = "&lt;div class='mainDiv'&gt;&lt;div class='forImg' style='float:left;margin:4px 0 0 3px;'&gt;&lt;img src=" + markerData[i].image + " /&gt;&lt;/div&gt;&lt;div style='float:right; width:220px; margin-top:5px; padding-left:10px;'&gt;&lt;div class='titleImg'&gt;" + markerData[i].title + "&lt;/div&gt;&lt;div class='descriptionTool'&gt;" + markerData[i].address + "&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;";
              //Define the infobox
              newMarkers[i].infobox = new InfoBox(infoboxOptions);
              //Open box when page is loaded
              newMarkers[i].infobox.open(map, marker);
              newMarkers[i].infobox.close();
  
  
  
              marker.set("myZIndex", marker.getZIndex());
              google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                  return function () {
                      newMarkers[i].infobox.open(map, this);
                      //marker.setIcon(icon1);
                      // styleIcon.set("color","#00ff00");
                      //map.panTo(markerData[i].latLng);
                  }
                  getHighestZIndex();
                  this.setOptions({zIndex: highestZIndex + 1});
              })(marker, i));
              google.maps.event.addListener(marker, 'mouseout', (function (marker, i) {
                  return function () {
                      newMarkers[i].infobox.close(map, this);
                      // marker.setIcon(icon2);
                      // map.panTo(markerData[i].latLng);
                  }
                  this.setOptions({zIndex: this.get("myZIndex")});
              })(marker, i));
  
          }
  
          return newMarkers;
  
      }
  
      markers = initMarkers(map, [
  
          { latLng: new google.maps.LatLng(43.072919, -89.402315), title: "xyz", image: 'img.jpg', address: 'xcd'}
   { latLng: new google.maps.LatLng(43.072919, -89.402315), title: "xyz", image: 'img.jpg', address: 'xcd'}
   { latLng: new google.maps.LatLng(43.072919, -89.402315), title: "xyz", image: 'img.jpg', address: 'xcd'}
  
  
  
      ]);
  
  }
  </code></pre>