<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<h3>Google Maps Demo</h3>
<input id="mapRadar" type="button" value="Turn on Weather Radar" />
<input id="mapTraffic" type="button" value="Turn on Traffic" />
<div style="width: 100%; height: 60%; margin-top: 10px;">
<div id="map"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="GoogleMapsAPI.css">
<script src="GoogleMapsAPI.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYhI5DKGX1t8Oref8HdsUXWsA9a25NXCg&callback=initMap">
</script>
</body>
</html>
// Code goes here
//
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYhI5DKGX1t8Oref8HdsUXWsA9a25NXCg&libraries=places"></script>
//&callback=initMap
// Traffic layer
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
// My Version Weather
var imageMapType = new google.maps.ImageMapType({
getTileUrl: function(tile,zoom) {
/* Include date at the end as a cachebuster */
return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/"
+ zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
opacity: 0.5
});
map.overlayMapTypes.push(imageMapType);
// Iowa State's version Weather
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true
});
map.overlayMapTypes.setAt("1",tileNEX);
goes = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-east-vis-1km-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'GOES East Vis',
isPng: true
});
map.overlayMapTypes.push(null); // create empty overlay entry
map.overlayMapTypes.setAt("0",goes);
map.overlayMapTypes.push(null); // create empty overlay entry
//Making radar move
if(map.overlayMapTypes.length == 0){
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
debugger;
return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-" + timestamps[i] + "/" + zoom + "/" + tile.x + "/" + tile.y +".png";
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true
});
map.overlayMapTypes.push(null);
map.overlayMapTypes.setAt("0", tileNEX);
} else{
map.overlayMapTypes.clear();
}
/* Styles go here */
var map, thePos, marker, infoWindow;
var i = 0;
var radarInterval;
var trafficLayer;
var timestamps = ['900913-m50m', '900913-m45m', '900913-m40m', '900913-m35m', '900913-m30m', '900913-m25m', '900913-m20m', '900913-m15m', '900913-m10m', '900913-m05m', '900913'];
function initMap() {
// Set Variables
trafficLayer = new google.maps.TrafficLayer();
infoWindow = new google.maps.InfoWindow();
// Center for map
thePos = {lat: 42.0308, lng: -93.6319};
// Create map
map = new google.maps.Map($('#map')[0], {
zoom: 6,
center: thePos
});
// Create marker at center map location
marker = new google.maps.Marker({
position: thePos,
map: map
});
//Get location of user
/*
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
}, function() {
// Throws error if user location cannot be found
//handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
//handleLocationError(false, infoWindow, map.getCenter());
}
*/
}
// Handle errors for locating user
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
// Turn on/off Weather Radar
$('#mapRadar').click(function(){
if($(this).val() === 'Turn on Weather Radar'){
i = 0;
$(this).val('Turn off Weather Radar');
radarInterval = setInterval(startAnimation, 500);
}else{
$(this).val('Turn on Weather Radar');
clearInterval(radarInterval);
map.overlayMapTypes.clear();
}
})
// Turn on/off Traffic
$('#mapTraffic').click(function(){
if($(this).val() === 'Turn on Traffic'){
$(this).val('Turn off Traffic');
trafficLayer.setMap(map)
} else{
$(this).val('Turn on Traffic');
trafficLayer.setMap(null);
}
})
// Animate the Weather Radar
function startAnimation(){
map.overlayMapTypes.clear();
map.overlayMapTypes.push(null);
tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "https://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-" + timestamps[i] + "/" + zoom + "/" + tile.x + "/" + tile.y +".png";
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true
});
map.overlayMapTypes.setAt("0", tileNEX);
i++;
if (i > 10 ){
i = 0;
}
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
width: 96%;
margin: 0 auto;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}