Create an interactive map using Google Maps

Create an InteractiveMap using Google Maps

An InteractiveMap can be created using Google Maps by changing the map config strategy to 'google' and set the accessToken to your Google key.

<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>Xweather JavaScript SDK - Create an Interactive Map using Google Maps</title>
  <script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>
  <link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">
  #map {
      height: 600px;
      margin: 30px auto;
      width: 1000px;
<div id="map"></div>
    window.onload = () => {
        const aeris = new Xweather('CLIENT_ID', 'CLIENT_SECRET');
        const utils = aeris.utils;
        aeris.views().then(views => {
            const map = new views.InteractiveMap(document.getElementById('map'), {
                center: {
                    lat: 39.0,
                    lon: -95.5
                zoom: 4,
                strategy: 'google',
                accessToken: 'GOOGLE_KEY',
                layers: 'radar,alerts',
                timeline: {
                    from: -6 * 3600,
                    to: 0
<!-- If you need to use a specific version of the google maps library you could use this method to load it-->
<!-- <script src="https://maps.googleapis.com/maps/weather-api/js?key=GOOGLE_KEY"
        async defer></script> -->