Creating 3D Google maps using WebGL

Creating  3D Google maps using WebGL

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.

Screen_Shot_2021-05-06_at_9.06.57_PM.max-2100x2100.png

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.

vector-map-id.png

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

ย