JavaScript SDK - 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>
<html>
<head>
  <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">
 
  <style>
  #map {
      height: 600px;
      margin: 30px auto;
      width: 1000px;
 
  }
  </style>
 
</head>
<body>
 
<div id="map"></div>
 
<script>
 
    window.onload = () => {
 
        const aeris = new AerisWeather('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
                }
            });
        });
    };
 
</script>
<!-- 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> -->
</body>
</html>