Merge pull request #2 from arc12012/Map

Google Maps API
arc12012 · Dec 1, 2016 · 3119fed · 3119fed
2 parents 8b3f4f2 + f0c6b89
commit 3119fed
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 0 deletions.
diff --git a/html/imgs/map.png b/html/imgs/map.png
diff --git a/html/imgs/map_pin.png b/html/imgs/map_pin.png
diff --git a/html/imgs/map_usa.png b/html/imgs/map_usa.png
diff --git a/html/webpages/map.html b/html/webpages/map.html
@@ -0,0 +1,128 @@
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Synchrony Financial</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">  
+
+    <style>
+      /* Always set the map height explicitly to define the size of the div
+       * element that contains the map. */
+      #map {
+        height: 50%;
+        width: 50%;
+        margin:0 auto;
+      }
+
+      h2{
+        text-align: center;
+        padding-bottom: 60px;
+      }
+    </style>
+
+  </head>
+
+  <body>
+
+    <nav class="navbar navbar-inverse navbar-fixed-top">
+      <div class="container-fluid">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#"><img src="../imgs/synchrony-financial-logo-dlpx.png" style = "height: 100%;"></a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
+          <ul class="nav navbar-nav navbar-right">
+            <li><a href="homePage.html">Home</a></li>
+            <li><a href="requestPage.html">Request Device</a></li>
+            <li><a href="#">Return Device</a></li>
+            <li><a href="listingPage.html">Device Listing</a></li>
+            <li><a href="shoppingCart.html">Shopping Cart</a></li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    <h2>Our Wonderful Synchrony Financial Map!</h2>
+
+    <div id="map"></div>
+    <script>
+
+      function initMap() {
+
+        var map = new google.maps.Map(document.getElementById('map'), {
+          zoom: 5,
+          center: {lat: 38.907192, lng: -77.036871}
+        });
+
+        // Create an array of alphabetical characters used to label the markers.
+        var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+        // Add some markers to the map.
+        // Note: The code uses the JavaScript Array.prototype.map() method to
+        // create an array of markers based on a given "locations" array.
+        // The map() method here has nothing to do with the Google Maps API.
+        var markers = locations.map(function(location, i) {
+          return new google.maps.Marker({
+            position: location,
+            label: labels[i % labels.length]
+          });
+        });
+
+        // Add a marker clusterer to manage the markers.
+        var markerCluster = new MarkerClusterer(map, markers,
+            {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
+      }
+      var locations = [
+        {lat: 47.610150, lng: -122.201516}, //Bellevue, WA
+        {lat: 37.774929, lng: -122.419416}, //San Francisco, CA
+        {lat: 37.338208, lng: -121.886329}, //San Jose, CA
+        {lat: 33.641132, lng: -117.918669}, //Costa Mesa, CA
+        {lat: 40.760779, lng: -111.891047}, //Salt Lake City, UT
+        {lat: 33.448377, lng: -112.074037}, //Phoenix, AZ
+        {lat: 44.080543, lng: -103.231015}, //Rapid City, SD
+        {lat: 39.023617, lng: -94.69357}, //Merriam, KS
+        {lat: 39.023617, lng: -94.69357}, //Merriam, KS
+        {lat: 36.372854, lng: -94.208817}, //Bentonville, AR
+        {lat: 33.150674, lng: -96.823612}, //Frisco, TX
+        {lat: 44.953703, lng: -93.089958}, //St. Paul, MN
+        {lat: 44.953703, lng: -93.089958}, //St. Paul, MN
+        {lat: 44.953703, lng: -93.089958}, //St. Paul, MN
+        {lat: 41.878114, lng: -87.629798}, //Chicago, IL
+        {lat: 39.689504, lng: -84.168827}, //Kettering, OH
+        {lat: 34.075376, lng: -84.29409}, //Alpharetta, GA
+        {lat: 40.798947, lng: -81.378447}, //Canton, OH
+        {lat: 35.227087, lng: -80.843127}, //Charloette, NC
+        {lat: 28.538335, lng: -81.379236}, //Orlando, FL
+        {lat: 40.593964, lng: -74.604906}, //Bridgewater, NJ
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 41.053430, lng: -73.538734}, //Stamford, CT
+        {lat: 42.345927, lng: -71.552287} //Marlborough, MA
+      ]
+    </script>
+    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
+    </script>
+    <script async defer
+    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCndOcexx4GAOGkRKBeK1E43u_sB9gjcaU&callback=initMap">
+    </script>
+
+  </body>
+</html>