Gmap3 Multiple Markers is Loading Slowly. How to solve?

Question

I am using Gmap3 to load a Google Map onto my site. Within this map there are 100+ markers. The problem is the map is very slow to load, taking over a minute to load the entire map.

How do I speed up the loading for a map with a lot of markers?

I am using the latest version of Gmap3 (v6) and I am using jQuery 2.1.

I tried changing the zoom level to a much closer view but that did not work. I also removed the green marker but that didn't speed things up either.

I wondered if changing the method from address to latitude and longitude would help speed things up but that is time intensive to do if it has little or no benefit.

From what I can see using Firebug it appears that the script is requesting each marker, getting them all, then displaying the marker. With each marker averaging 100ms (roughly) it takes over a minute to do.

Is there a way to speed this up? Maybe request more than one marker at a time?

EDIT

In researching this on Gmap3's website I came across clustering. I implemented the example provided in the download file but it still loads painfully slow.

var RetailList = [
  {address:'5555 Brighton Blvd., Denver, CO 80216', data:'<a href="#id1" class="fancybox rls">Store Location 1</a>'},
  //Additional locations using same markup as above.
];

$(function() {

    $("#rec-map").gmap3({
  map:{
    options:{
      center:[39.739, -104.9847],
      zoom: 9
    }
  },
 marker: {
            values: RetailList,
            cluster:{
              radius:100,
              0: {
                content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
                width: 53,
                height: 52
              },
              20: {
                content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
                width: 56,
                height: 55
              },
              50: {
                content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
                width: 66,
                height: 65
              },
              events: {
                click: function(cluster) {
                  var map = $(this).gmap3("get");
                  map.setCenter(cluster.main.getPosition());
                  map.setZoom(map.getZoom() + 1);
                }
              }
            },
            options: {
              icon: new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/icon_green.png"),
              draggable: false
            },
    events:{
      mouseover: function(marker, event, context){
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker,
              options:{content: context.data}
            }
          });
        }
      } /* ,
      mouseout: function(){
        var infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.close();
        }
      } */
    }
   }
  });
});

Answer 1

As it turns out changing from using address to longitude/latitude worked. I also am using it in conjunction with the clustering feature of Gmap3 and it is now working quickly and smoothly.

The code above works but change this line(s):

This:

{address:'5555 Brighton Blvd., Denver, CO 80216', data:'<a href="#id1" class="fancybox rls">Store Location 1</a>'},
 //Additional locations using same markup as above.

Became:

{lat:39.777648,lng:-104.969998, data:'<a href="#id1" class="fancybox rls">Store Location 1</a>'},
 //Additional locations using same markup as above.

I believe the reason for this is using the address the script had to lookup the address and return the correct location. Using longitude and latitude there is only one location and it can quickly plot the location.