diff --git a/map.js b/map.js
new file mode 100644
index 0000000..ac15272
--- /dev/null
+++ b/map.js
@@ -0,0 +1,119 @@
+// 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);
+        }
+    }
+}
\ No newline at end of file