Marker Clustering On Google Maps With Json Multi Markers

by

Marker Clustering on Google Maps with JSON multi markers

Marker clustering is a technique used in Google Maps to group multiple markers into a single cluster when they are close to each other. This helps in improving the performance of the map when dealing with a large number of markers.

To implement marker clustering with JSON multi markers on Google Maps, we can follow the steps below:

  1. Include Google Maps JavaScript API in your HTML file. You can do this by adding the following script tag in the head section of your HTML file:
    2. <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
  2. Create a div element in your HTML file to hold the map. You can give it an id for easier access in JavaScript:
    3. <div id="map"></div>
  3. In your JavaScript code, initialize the map by accessing the div element and creating a new instance of the google.maps.Map class:
    4. var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 37.7749, lng: -122.4194},
  zoom: 10
});
  4. Load the JSON data containing the markers onto the map using AJAX. You can use the XMLHttpRequest or fetch API to retrieve the JSON data from a server:
    5. var request = new XMLHttpRequest();
request.open('GET', 'markers.json', true);

request.onload = function() {
  if (request.status >= 200 && request.status < 400) {
    var markersData = JSON.parse(request.responseText);
    // Call a function to add markers to the map
    addMarkers(markersData);
  } else {
    console.error('Error loading markers JSON');
  }
};

request.send();
  5. Create a function to add markers to the map. Inside this function, you can loop through the markersData array and create a new google.maps.Marker object for each marker:
    6. function addMarkers(markersData) {
  var markers = [];
  
  for (var i = 0; i < markersData.length; i++) {
    var marker = new google.maps.Marker({
      position: {lat: markersData[i].lat, lng: markersData[i].lng},
      map: map,
      title: markersData[i].title
    });
    
    markers.push(marker);
  }
}
  6. Implement marker clustering by including the MarkerClusterer library provided by Google. You can add the library script tag in your HTML file:
    7. <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
  7. In the addMarkers function, create a new instance of the MarkerClusterer class and pass in the map object and the array of markers:
    8. var markerCluster = new MarkerClusterer(map, markers, {
  imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});

By following the above steps, you should be able to implement marker clustering with JSON multi markers on Google Maps. The markers will be clustered when they are close to each other, improving the performance and readability of the map.

Here is an example of how the above code can be combined in an HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer></script>
  <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
</head>
<body>
  <div id="map" style="height: 400px; width: 100%;"></div>
  <script>
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 37.7749, lng: -122.4194},
      zoom: 10
    });
    
    var request = new XMLHttpRequest();
    request.open('GET', 'markers.json', true);
    
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var markersData = JSON.parse(request.responseText);
        addMarkers(markersData);
      } else {
        console.error('Error loading markers JSON');
      }
    };
    
    request.send();
    
    function addMarkers(markersData) {
      var markers = [];
      
      for (var i = 0; i < markersData.length; i++) {
        var marker = new google.maps.Marker({
          position: {lat: markersData[i].lat, lng: markersData[i].lng},
          map: map,
          title: markersData[i].title
        });
        
        markers.push(marker);
      }
      
      var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });
    }
  </script>
</body>
</html>

Leave a comment