dkoug Blog

Google maps populate markers with ajax and marker Cluster

google maps -- Posted on Jan. 21, 2018

Google maps populate markers with ajax and marker Cluster

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function populateMarkers(url,type,data,datatype, markerCluster,bounds, markers,infowindow){
  /*
  url : the url link for ajax Call
  type: method post or get
  data: a dict {},
  datatype: xml or json,
  markerCluster instance,
  bounds: Googlemaps instance,
  markers: array,
  infowindow: google maps InfoWindow
  */
  $.ajax({
      url: url,
      type: type,
      data: data,
      datatype: datatype,
      success: function(data)
      {
        $('#loading').hide();
        markerCluster.minimumClusterSize = data.features.length;
        for (var i = 0; i < data.features.length; i++){
          marker = new google.maps.Marker({
              position: new google.maps.LatLng(data.features[i].geometry.coordinates[1],data.features[i].geometry.coordinates[0]),
              map: map

            });
           latlng = new google.maps.LatLng(data.features[i].geometry.coordinates[1],data.features[i].geometry.coordinates[0])
           bounds.extend(latlng);
           markers.push(marker);
           google.maps.event.addListener(marker, 'click', (function(marker, i) {
             return function() {
               infowindow.setContent("Name:"+data.features[i].properties.name+"</br>"+"Category :"+data.features[i].properties.category);
               infowindow.open(map, marker);
             }
           })(marker, i));
         }
         map.fitBounds(bounds);
         markerCluster.addMarkers(markers);
      }
  });
}