Google Maps (Clusters)

HTML

<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script type="text/javascript" async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWQFCssXf-cic6HMYiRncde_4r9Paq9JY&callback=initMap">


</script>

<div id="map-container">
  <div id="map"></div>
</div>

CSS

body {
   margin: 0;
   padding: 10px 20px 20px;
   font-family: Arial;
   font-size: 16px;
 }
 
 #map-container {
   padding: 6px;
   border-width: 1px;
   border-style: solid;
   border-color: #ccc #ccc #999 #ccc;
   -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
   -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
   box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
   width: 600px;
 }
 
 #map {
   width: 600px;
   height: 400px;
 }
 
 #actions {
   list-style: none;
   padding: 0;
 }
 
 #inline-actions {
   padding-top: 10px;
 }
 
 .item {
   margin-left: 20px;
 }

JavaScript

function initMap() {
  var locations = [];

  $.ajax({
    type: "GET",
    url: "/echo/json/",
    dataType: "json",
    success: function() {
      data = [{
        "lat": "51.6286544",
        "lng": "0.8193251"
      }, {
        "lat": "51.4826440",
        "lng": "-0.0473788"
      }];
      
      $.each(data, function(i, item) {
        locations.push({
          "lat": Number(item.lat),
          "lng": Number(item.lng)
        });
      });
      createMarkers(map, locations);
    }
  });

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 51.5074,
      lng: 0.1278
    }
  });
}

function createMarkers(map, locations) {
  // Create an array of alphabetical characters used to label the markers. 
  var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

  // Add some markers to the map.
  // Note: The code uses the JavaScript Array.prototype.map() method to
  // create an array of markers based on a given "locations" array.
  // The map() method here has nothing to do with the Google Maps API.
  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  // Add a marker clusterer to manage the markers.
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
}