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.

Google Maps as the baselayer in an InteractiveMap
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Aeris 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/api/js?key=GOOGLE_KEY"
        async defer></script> -->
</body>
</html>

Last modified: June 27, 2019