-
-
Save burhr2/dff0d923fc2301e31cfb214b9ffdb192 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<script src="jquery-2.1.4.js"></script> | |
<link rel="stylesheet" type="text/css" href="styles.css"> | |
<style> | |
#map { | |
height: 500px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="navbar"><span>Google Maps - Javascript API</span></div> | |
<div id="wrapper"> | |
<div id="map"></div> | |
<script> | |
var map; | |
function initMap() { | |
map = new google.maps.Map(document.getElementById('map'), { | |
center: {lat: 40.797, lng: -73.9644}, | |
zoom: 13 | |
}); | |
var trafficLayer = new google.maps.TrafficLayer(); | |
var transitLayer = new google.maps.TransitLayer(); | |
var bikeLayer = new google.maps.BicyclingLayer(); | |
$('#traffic-b').click(function(){ | |
trafficLayer.setMap(map); | |
transitLayer.setMap(null); | |
bikeLayer.setMap(null); | |
}); | |
$('#transit-b').click(function(){ | |
trafficLayer.setMap(null); | |
transitLayer.setMap(map); | |
bikeLayer.setMap(null); | |
}); | |
$('#bike-b').click(function(){ | |
trafficLayer.setMap(null); | |
transitLayer.setMap(null); | |
bikeLayer.setMap(map); | |
}); | |
} | |
</script> | |
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" | |
async defer></script> | |
<button id="traffic-b">Traffic</button> | |
<button id="transit-b">Transit</button> | |
<button id="bike-b">Bike</button> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment