Using with Google Maps

Using with Google Maps

Xweather provides a suite of tools for using our layers with various mapping libraries, including the Xweather JavaScript SDK (opens in a new tab). In some use cases, you may have existing applications using the Google Maps JS SDK (opens in a new tab), which you can add Maps layers to.

The following provides an example of the Xweather Raster Maps radar layer integrated with the Google Maps JS SDK (opens in a new tab) library.

<!DOCTYPE html>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
<div id='map'></div>
    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_secret}/radar/',
                    zoom, '/', coord.x, '/', coord.y, '/current.png'].join('');
            tileSize: new google.maps.Size(256, 256)
<script src="https://maps.googleapis.com/maps/weather-api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>