Create an InteractiveMapApp using Google Maps
An InteractiveMapApp can be created using Google Maps by changing the map config strategy to 'google' and set the accessToken to your Google key. Also notice in the config how we moved the legend over to the lower left as well as slightly bumping the timeline up.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Aeris JavaScript SDK - Create an Interactive Map App 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.apps().then((apps) => {
const map = new apps.InteractiveMapApp('#map', {
map : {
strategy: 'google',
zoom : 4,
layers : 'radar',
accessToken: 'GOOGLE_KEY'
},
panels: {
layers: {
buttons: [{
id : 'radar',
value: 'radar:80',
title: 'Radar'
}, {
id : 'satellite',
value: 'satellite:75',
title: 'Satellite'
}, {
id : 'alerts',
value: 'alerts',
title: 'Alerts'
}]
},
legends: {
position: {
pin: 'bottomleft',
translate: { x: 10, y: -30 }
}
},
timeline: {
position: {
translate: {x: 0, y: -15}
}
}
},
});
});
};
</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>