Add files via upload

t1m41n4 · May 20, 2021 · f655bba · f655bba
1 parent b60d62e
commit f655bba
Show file tree

Hide file tree

Showing 4 changed files with 5,654 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<html>
+
+<head>
+  <title>GOOGLE MAPS PROJECT</title>
+  <script src="js/store-data.js"></script>
+  <script src="js/index.js"></script>
+  <link rel="stylesheet" href="style/style.css" />
+  <script src="https://kit.fontawesome.com/c939d0e917.js"></script>
+</head>
+
+<body>
+  <div id="map"></div>
+  <div class="title">Store Locator</div>
+  <div class="search-container">
+    <div class="search">
+      <input id="zip-code-input" type="text" placeholder="Enter zip" />
+      <i class="fas fa-search" onclick="searchStores()"></i>
+    </div>
+  </div>
+  <div class="stores-list-container">
+    <div class="stores-list">
+      <div class="store-container">
+        <div class="store-info-container">
+          <div class="store-address">
+            <span>8480 Berverly Blvd
+              Los Angeles, CA 90048</span>
+            <span>Los Angeles, CA 90048</span>
+
+          </div>
+          <div class="store-phone-number">345-289-549</div>
+        </div>
+        <div class="store-number-container">
+          <div class="store-number">
+            1
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+
+  <script src=https://kit.fontawesome.com/c939d0e917.js></script>
+  <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDbjnCuqQlaHb1WFMl1F7mw4O6nzyoGrzA&callback=initMap"></script>
+</body>
+
+</html>
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,145 @@
+window.onload = function () {};
+
+var map;
+var markers = [];
+var infoWindow;
+
+function initMap() {
+  var LosAngeles = { lat: 34.06338, lng: -118.35808 };
+  map = new google.maps.Map(document.getElementById("map"), {
+    center: LosAngeles,
+    zoom: 11,
+    mapTypeId: "roadmap",
+  });
+  infoWindow = new google.maps.InfoWindow();
+  searchStores();
+}
+function searchStores() {
+  var foundStores = [];
+  var zipCode = document.getElementById("zip-code-input").value;
+  console.log("zipCode");
+  if (zipCode) {
+    for (var store of stores) {
+      var postal = store["address"]["postalCode"].substring(0, 5);
+      if (postal == zipCode) {
+        foundStores.push(store);
+      }
+    }
+  } else {
+    foundStores = stores;
+  }
+
+  clearLocations();
+  displayStores(foundStores);
+  showStoresMarkers(foundStores);
+  setOnClickListener();
+}
+function clearLocations() {
+  infoWindow.close();
+  for (var i = 0; i < markers.length; i++) {
+    markers[i].setMap(null);
+  }
+  markers.length = 0;
+}
+function setOnClickListener() {
+  var storeElements = document.querySelectorAll(".store-container");
+
+  storeElements.forEach(function (elem, index) {
+    elem.addEventListener("click", function () {
+      new google.maps.event.trigger(markers[index], "click");
+    });
+  });
+}
+
+function displayStores(stores) {
+  var storesHtml = "";
+  for (var [index, store] of stores.entries()) {
+    var address = store["addressLines"];
+    var phone = store["phoneNumber"];
+    storesHtml += `
+    <div class="store-container">
+    <div class="store-container-background">
+                <div class="store-info-container">
+                <div class="store-address">
+                    <span>${address[0]}</span>
+                    <span>${address[1]}</span>
+
+                </div>
+                <div class="store-phone-number">${phone}</div>
+                </div>
+                <div class="store-number-container">
+                    <div class="store-number">
+                    ${index + 1}
+
+                        
+                    </div>
+                </div>
+                </div>
+            </div>
+
+      
+      `;
+    document.querySelector(".stores-list").innerHTML = storesHtml;
+  }
+}
+
+function showStoresMarkers(stores) {
+  var bounds = new google.maps.LatLngBounds();
+  for (var [index, store] of stores.entries()) {
+    var latlng = new google.maps.LatLng(
+      store["coordinates"]["latitude"],
+      store["coordinates"]["longitude"]
+    );
+
+    var name = store["name"];
+    var address = store["addressLines"][0];
+    var openStatusText = store["openStatusText"];
+    var phoneNumber = store["phoneNumber"];
+    bounds.extend(latlng);
+    createMarker(latlng, name, address, openStatusText, phoneNumber, index + 1);
+  }
+  map.fitBounds(bounds);
+}
+function createMarker(
+  latlng,
+  name,
+  address,
+  openStatusText,
+  phoneNumber,
+  index
+) {
+  var html = `
+    <div class="store-info-window">
+    <div class="store-info-name">
+    ${name}
+    </div>
+    <div class="store-info-status">
+    ${openStatusText}
+    </div>
+    <div class="store-info-address">
+    <div class="cicrle">
+    <i class="fas fa-location-arrow"></i>
+    </div>
+    ${address}
+    </div>
+    <div class="store-info-phone">
+    <div class="circle">
+    <i class="fas fa-phone-alt"></i>
+    
+    </div>
+    ${phoneNumber}
+    </div>
+    </div>
+    `;
+
+  var marker = new google.maps.Marker({
+    map: map,
+    position: latlng,
+    label: index.toString(),
+  });
+  google.maps.event.addListener(marker, "click", function () {
+    infoWindow.setContent(html);
+    infoWindow.open(map, marker);
+  });
+  markers.push(marker);
+}