JV_Install_Map/script.js

// Global variables
var map, gmarkers = [], blue = 0, cyan = 0, purple = 0, green = 0, orange = 0, yellow = 0, red = 0, black = 0;
var catList = document.getElementsByClassName('chk').value;

// The initial function to create and display the map on the page
function initMap() {
    var bounds = new google.maps.LatLngBounds();
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        streetViewControl: false,
        mapTypeControl: false,
        scaleControl: false,
        disableDefaultUI: true
    });

    for (var i = 0; i < markers.length; i++) {
        addMarker(markers[i]);
        bounds.extend({ lat: parseFloat(markers[i].Lat), lng: parseFloat(markers[i].Long) });
    }

    // Builds legend HTML with marker count included
    document.getElementById("blue").innerHTML = "<img src='blue.png' alt='JV Installers'><input type='checkbox' class='chk' value='blue' name='filter' onclick='getChecked()' checked></input><b> JV Installers (" + blue + ")</b>";
    document.getElementById("cyan").innerHTML = "<img src='cyan.png' alt='JV Service'><input type='checkbox' class='chk' value='cyan' name='filter' onclick='getChecked()' checked></input><b> JV Service (" + cyan + ")</b>";
    document.getElementById("purple").innerHTML = "<img src='purple.png' alt='JV Drivers'><input type='checkbox' class='chk' value='purple' name='filter' onclick='getChecked()' checked></input><b> JV Drivers (" + purple + ")</b>";
    document.getElementById("green").innerHTML = "<img src='green.png' alt='3rd Party'><input type='checkbox' class='chk' value='green' name='filter' onclick='getChecked()' checked></input><b> 3rd Party (" + green + ")</b>";
    document.getElementById("orange").innerHTML = "<img src='orange.png' alt='Freight Only'><input type='checkbox' class='chk' value='orange' name='filter' onclick='getChecked()' checked></input><b> Freight Only (" + orange + ")</b>";
    document.getElementById("yellow").innerHTML = "<img src='yellow.png' alt='Unassigned'><input type='checkbox' class='chk' value='yellow' name='filter' onclick='getChecked()' checked></input><b> Unassigned (" + yellow + ")</b>";
    document.getElementById("red").innerHTML = "<img src='red.png' alt='Not Scheduled'><input type='checkbox' class='chk' value='red' name='filter' onclick='getChecked()' checked></input><b> Not Scheduled (" + red + ")</b>";
    document.getElementById("black").innerHTML = "<img src='black.png' alt='Bringbacks'><input type='checkbox' class='chk' value='black' name='filter' onclick='getChecked()' checked></input><b> Bringbacks (" + black + ")</b>";

    // Sets the map zoom and center based on the markers created
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds);
    map.setZoom(map.getZoom() - 1);

    // Calls the initial filter check on initialization
    getChecked();
}

//Creates the marker object and sets the associated variables
function addMarker(marker) {
    var pos = new google.maps.LatLng(parseFloat(marker.Lat), parseFloat(marker.Long));
    var name = marker.Customer;
    var category = marker.Marker;
    var icon = marker.Marker + ".png";
    var mark = new google.maps.Marker({
        position: pos,
        title: name,
        category: category,
        icon: icon,
        visible: true
    });

    // Getting count of each type of marker for the legend
    switch (category) {
        case "blue":
            blue++; break;
        case "cyan":
            cyan++; break;
        case "purple":
            purple++; break;
        case "green":
            green++; break;
        case "orange":
            orange++; break;
        case "yellow":
            yellow++; break;
        case "red":
            red++; break;
        default:
            black++;
    }

    // Creating info window for the on-click display
    var infoWin = new google.maps.InfoWindow({
        content:
            "<strong>" + name + "</strong><br>" +
            "Customer Order: " + marker.CO + "<br>" +
            "Address: " + marker.Address + "<br>" +
            "Phone: " + marker.Phone + "<br>" +
            "Vendor: " + marker.Vendor + "<br>" +
            "PO: " + marker.PO + "<br>" +
            "CO Due Date: " + marker["CO Due Date"] + "<br>" +
            "Install Date: " + marker["Install Date"] + "<br>" +
            "Type: " + marker.Type + "<br>"
    });

    mark.addListener("click", () => {
        infoWin.open({
            anchor: mark,
            map
        });
    });

    gmarkers.push(mark);
}

// Gets list of all boxes checked on page
var getChecked = function () {
    var checkedPlace = []
    var allFilterElem = document.getElementsByName('filter');
    for (var i = 0; i < allFilterElem.length; i++) {
        if (allFilterElem[i].checked == true) {
            checkedPlace.push(allFilterElem[i].value)
        }
    }
    filterCheck(checkedPlace);
}

// Iterates through marker array to check if the marker category matches with the box checked. Disassociates it from the map if the checkbox is not set.
var filterCheck = function (cat) {
    for (var i = 0; i < gmarkers.length; i++) {
        if (cat.includes(gmarkers[i].category)) {
            gmarkers[i].setMap(map);
        }
        else {
            gmarkers[i].setMap(null);
        }
    }
}