Skip to content

Google Maps API #2

Merged
merged 1 commit into from
Dec 1, 2016
+128 −0
Merged

Google Maps API #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added html/imgs/map.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html/imgs/map_pin.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html/imgs/map_usa.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
128 changes: 128 additions & 0 deletions html/webpages/map.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>