Google Maps API Integration

AerisWeather provides a suite of tools for using our layers with various mapping libraries, including the Aeris Interactive Maps SDK. In some use cases, you may have existing application using the Google Maps API , which you may want to add AMP layers. The following provides an example of Aeris 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>