Raster Maps - Using with Google Maps

Xweather provides a suite of tools for using our layers with various mapping libraries, including the Xweather JavaScript SDK. In some use cases, you may have existing applications using the Google Maps JS SDK , 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 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.api.xweather.com/{client_id}_{client_secret}/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/weather-api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap" async defer></script>
</body>
</html>