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 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
}
});
});
};
</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>