In this article, we are going to see how to add custom 2D and 3D graphics and animated content to google maps using WebGL.
ThreeJSOverlayView - It helps to graphics and animated content to our maps. We can add custom 3D models inside the map by creating a threejs scene.
To access Google Maps API we need to create an account for GOOGLE CLOUD PLATFORM & Enable Google maps Api then generate an API KEY.
Go to google maps platform -> map management then create a map Id.
To create a new map ID, follow the steps in Using Cloud-based Map Styling - Get a Map ID. Be sure to set the Map type to JavaScript, and select the Vector option. Check Tilt and/or Rotation to enable tilt and rotation on the map.
Doing so will allow you to programmatically adjust these values, and also lets users adjust tilt and heading directly on the map. If the use of tilt or heading will adversely affect your app, leave Tilt and Rotation un-checked so users will not be able to adjust tilt and rotation.
Before getting into code we need to install some dependencies
npm install three
npm install @googlemaps/three
HTML
<div>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&v=beta&callback=initMap">
</script>
</div>
JAVASCRIPT
//importing required dependencies
import { AmbientLight, DirectionalLight, Scene } from "three";
import { ThreeJSOverlayView } from "@googlemaps/three";
initMap(){
let map;
//adding customizations to the map
const mapOptions = {
heading: 320,
tilt: 0,
zoom: 20,
center: {lat: 48.8584, lng: 2.2945,}, //eifel tower
mapId: "Your map Id",
// disable interactions due to animation loop and moveCamera
disableDefaultUI: true,
gestureHandling: "none",
keyboardShortcuts: false,
};
map = new google.maps.Map(document.getElementById('map'),mapOptions)
//creating a scene
const scene = new Scene();
//adding lightings to our scene
const ambientLight = new AmbientLight('yellow', 1.0);
scene.add(ambientLight);
const directionalLight = new DirectionalLight('white', 0.25);
directionalLight.position.set(0, 10, 50);
scene.add(directionalLight);
let { tilt, heading, zoom } = mapOptions;
//animating the map
const animate = () => {
if (tilt < 67.5) {
tilt += 0.5;
} else if (heading <= 360) {
heading += 0.2;
zoom -= 0.0005;
} else {
// exit animation loop
return;
}
map.moveCamera({ tilt, heading, zoom });
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
});
//making our map 3D using ThreeJSOverlayView
new ThreeJSOverlayView({
map,
scene,
anchor: { ...mapOptions.center, altitude: 100 },
});
initMap()
We need some styling to view the map properly, so we should give it some height.
CSS
*{
margin: 0;
padding: 0;
}
#map{
height: 100vh;
}
Outro:
related sources:
We can add our own 3D models to the map and make it interactive. You can use other map APIS provided by google and try something new. Be creative and come up with new ideas.
Thank you for reading ๐
Happy Learning
-JHA