google maps

google maps

Explore google maps code snippets and tutorials

google maps

Google maps populate markers with ajax and marker Cluster

Google maps populate markers with ajax and marker Cluster

javascript
 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);
      }
  });
}
google maps

Google maps load geojson with ajax

Google maps load geojson with ajax

javascript
 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
function populateGeometry(url,type,data,datatype, infowindow){
  /*
  url : the url link for ajax Call
  type: method post or get
  data: a dict {},
  datatype: xml or json,
  infowindow: google maps InfoWindow
  */
  $.ajax({
      url: url,
      type: type,
      data: data,
      datatype: datatype,
      success: function(data)
      {
          $('#loading').hide();
          for (var i = 0; i < data.features.length; i++){
  	     map.data.addListener('click', function(event) {
  		var myHTML = event.feature.getProperty("name");
  		var mytype = event.feature.getGeometry().getType();
  		infowindow.setContent("<div style='width:150px; text-align: center;'>"+myHTML+"</div>");
                infowindow.setPosition(event.latLng);
		infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
	        infowindow.open(map);
  	     });
    	     map.data.addGeoJson(data.features[i]);
  	 };
         var bounds = new google.maps.LatLngBounds();
         map.data.forEach(function(feature){
             feature.getGeometry().forEachLatLng(function(latlng){
                 bounds.extend(latlng);
              });
          });
          map.fitBounds(bounds);
      }
  });
}