AerisWeather provides a suite of tools for using our layers with various mapping libraries, including the AerisWeather JavaScript SDK. In some use cases, you may have existing applications using the Google Maps API, which you can add Maps layers to. The following provides an example of the AerisWeather Maps radar layer integrated with the Google Maps API library.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var gmap;
function initMap() {
gmap = new google.maps.Map(document.getElementById('map'), {
center: {lat: 44.96, lng: -93.27},
zoom: 5
});
var radar = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return ['https://maps.aerisapi.com/[client_id]_[client_key]/radar/',
zoom, '/', coord.x, '/', coord.y, '/current.png'].join('');
},
tileSize: new google.maps.Size(256, 256)
});
gmap.overlayMapTypes.push(radar);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap"
async defer></script>
</body>
</html>
Last modified: March 28, 2022