Using MapsGL with Google Maps
This example demonstrates using MapsGL with the Google Maps (opens in a new tab) mapping library.
google.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MapsGL SDK - Using MapsGL with Google Maps</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maps.googleapis.com/maps/api/js?v={% $versions.google.current %}&key=GOOGLE_KEY" defer></script>
<script defer src="{% $paths.sdk %}"></script>
<style>
#map {
height: 600px;
margin: 30px auto;
width: 1200px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.addEventListener('load', () => {
// create the Google map instance
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 40, lng: -85.5 },
zoom: 4,
mapId: 'GOOGLE_MAP_ID'
});
// create the account
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
// create the Google Map Controller
const controller = new aerisweather.mapsgl.GoogleMapController(map, { account });
controller.on('load', () => {
// do stuff, like add weather layers
controller.addWeatherLayer('radar');
});
});
</script>
</body>
</html>