Skip to content

Instantly share code, notes, and snippets.

@theredstapler

theredstapler/google-map-traffic.html

Last active April 2, 2023 13:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save theredstapler/0b8645a3410b71c8aa0253d86ee24278 to your computer and use it in GitHub Desktop.
Save theredstapler/0b8645a3410b71c8aa0253d86ee24278 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
google-map-traffic.html
<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