<!-- Questions about any of this. Email me: jmattox@genconsult.com -->

<!-- All Google Map Interactive Logic -->
<script>

/* Initialize Your Map and hook to your <Div> */  
window.initMap = function() {
  const customermap = new google.maps.Map(document.getElementById('CustomerMap'), {
    zoom: 4,
    center: {lat: 39.10345, lng: -94.58311}
});
 

       
/* Create an InfoWindow to display your data over a Marker */
const infoWindow = new google.maps.InfoWindow({
    content: "",
    disableAutoPan: true,
});
 

/* Looping construct that spins through your array and build markers/listeners */
const markers = [[MapData]].map((customer, i) => {

    const marker = new google.maps.Marker({
        position: {lat:customer.lat, lng:customer.lng},
        title: customer.name,
        map: customermap
    });

    const CustomerInfo = "<b>"+customer.name+"</b><br/>"+customer.address     
    marker.addListener("mouseover", () => {
        infoWindow.setContent(CustomerInfo);
        infoWindow.open(customermap, marker);
    });
    marker.addListener("mouseout", () => {
        infoWindow.close(customermap, marker);
    });
        
    return marker;
});
 

        
/* Add a marker clusterer to manage the markers. */
const markerCluster = new MarkerClusterer(customermap, markers, {imagePath:'https://campfire.plantanapp.com/portals/0/MarkerClusterer/images/m'});
  
}
</script>

<!-- Markercluster Js File -->
<script src="https://campfire.plantanapp.com/portals/0/MarkerClusterer/javascript/markerclusterer.js">
</script>

<!-- Call Google Maps API To Build Map -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=[JerryMattox:MapAPIKey]&callback=initMap">
</script>

<!-- The div element for CustomerMap -->
<div id="CustomerMap" style="height: 500px; width: 100%;"></div>