<!-- 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(){
/* function initMap() { */
    const customermap = new google.maps.Map(document.getElementById('CustomerMap'), {
    zoom: 4,
    center: {lat: 39.10345, lng: -94.58311}
});
 

/* 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
    });

        
    return marker;
});

}
</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>