title: Google Map API is Extremely Slow
body: <p>So I'm setting up a dynamic Google map on all of the pages on the site to show the locations you can see on every page to help users understand the locations.</p>
  
  <p>It works, but works EXTREMELY slow, so slow that if it has about 40+ it can take around 1 minute to load the map and if it's more locations than that on a page it just get stuck and does not load the map.</p>
  
  <p>Here is a link to see the map:
  <a href="http://www.exchange-currency.org/wakefield/" rel="nofollow noreferrer">http://www.exchange-currency.org/wakefield/</a></p>
  
  <p>And Here's the code as it is on the website, you can also see the code with view source but note the addresses are from a string with php, you can see the output on the view source of the page.</p>
  
  <pre><code> &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?q=&lt;?php the_title(); ?&gt;&amp;key=AIzaSyDeyknfWm0qmejgXZh_VXihNcHbidewODQ"&gt;&lt;/script&gt; 
  
   &lt;script type="text/javascript"&gt;
    var delay = 10;
    var infowindow = new google.maps.InfoWindow();
    var latlng = new google.maps.LatLng();
    var mapOptions = {
      zoom: 4,
      center: latlng,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var geocoder = new google.maps.Geocoder(); 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var bounds = new google.maps.LatLngBounds();
  
    function geocodeAddress(address, next) {
      geocoder.geocode({address:address}, function (results,status)
        { 
           if (status == google.maps.GeocoderStatus.OK) {
            var p = results[0].geometry.location;
            var lat=p.lat();
            var lng=p.lng();
            createMarker(address,lat,lng);
          }
          else {
             if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
              nextAddress--;
              delay++;
            } else {
                          }   
          }
          next();
        }
      );
    }
   function createMarker(add,lat,lng) {
     var contentString = add;
     var marker = new google.maps.Marker({
       position: new google.maps.LatLng(lat,lng),
       map: map,
             });
  
    google.maps.event.addListener(marker, 'click', function() {
       infowindow.setContent(contentString); 
       infowindow.open(map,marker);
     });
  
     bounds.extend(marker.position);
  
   }
    var locations = [&lt;?php echo $locationAddresses; ?&gt;];
    var nextAddress = 0;
    function theNext() {
      if (nextAddress &lt; locations.length) {
        setTimeout('geocodeAddress("'+locations[nextAddress]+'",theNext)', delay);
        nextAddress++;
      } else {
        map.fitBounds(bounds);
      }
    }
    theNext();
  
  &lt;/script&gt;
  </code></pre>
  
  <p>What can I do to make it work in a normal speed so its actually usable?</p>
  
  <p>Here's a link to a page with more locations so you'll see what I'm talking about:
  <a href="http://www.exchange-currency.org/montreal/" rel="nofollow noreferrer">http://www.exchange-currency.org/montreal/</a></p>
  
  <p>Thanks!</p>
  
  <p>Edit:</p>
  
  <p>Also if there is a way to make it load async and with clusters instead of multiple markers that would be great, can't seem to get it figured out =/</p>