Marker Clustering

by Lawrence Ross

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Marker Clustering</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
  <input id="btn" type="button" value="Clear Markers" />
    <div id="map"></div>
    <div id="data">[]</div>
    <div id="allData">[]</div>
    <div id="searchData">[]</div>
  </body>
</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
var geocoder;
var markerAll;
var markers = [];

//Code to load the map with center point of Monterey MA
function initMap() {
    var monterey = {lat: 42.181613, lng: -73.215013};
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
    center: { lat: -28.024, lng: 140.887 },
        mapTypeId: google.maps.MapTypeId.HYBRID,
        labels: true,
    });

    //collect customer data and geocoder object - declare geocoder as global
    var cusdata = JSON.parse(document.getElementById('data').innerHTML);
    geocoder = new google.maps.Geocoder();  
    // codeAddress(cusdata);

    var allData = JSON.parse(document.getElementById('allData').innerHTML);
    allData = locations;
    showAllCustomers(allData);

    var searchData = JSON.parse(document.getElementById('searchData').innerHTML);
    // searchData = locations;
    // showSearchedCustomer(searchData);
    
}
var markerCluster;
function showAllCustomers(allData) {
    //Create marker clusterer to group data
    markerCluster = new MarkerClusterer(map, [], {
        imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
      });

    //declare info window variable outside of loop to allow to clear when selecting other markers
    var infoWind = new google.maps.InfoWindow;
    Array.prototype.forEach.call(allData, function(data){
        var content = document.createElement('div');
        var strong = document.createElement('strong');
        
        strong.textContent = [data.lastName + ' ' + data.physicalAddress];
        content.appendChild(strong);

        //add image to infowindow - you are also able to add image path to mysql and then append dynamically
        // var img = document.createElement('img');
        // img.src = 'images/santahat.png';
        // img.style.width = '50px';
        // content.appendChild(img);

        //Create markers for customer locations and customize
        var iconBase =...