29 July, 2021

Placing markers on a 3D Google Map

As of May 2021, developers can now render 2D and 3D objects on a Google map, allowing users to tilt and pan for different perspectives. Google has a great tutorial on how to implement a basic 3D map here—which includes placing a marker at the central location of the map. 

However, after completing the tutorial, I wanted to explore adding multiple markers on the map - perhaps displaying restaurants located around a hotel. This is where things can get a little tricky when needing to render multiple markers on a map.

I have found a way around this and I'll take you through the solution in the steps below with the code provided. 

How to add multiple markers to a 3D Google Map

In the tutorial code, the map is initialised at a latitude and longitude, with a zoom level.

When the marker is loaded, it is scaled and rotated, but there is no reference to the latitude and longitude of where it should be placed.

This is because the 3D map is treated as a ‘space’ as opposed to a map in the traditional sense. When the marker is placed, it is added at the current camera position, which is equal to the centre as the map is initialised. The tutorial does not address placing multiple 3D objects on the map…but this isn’t impossible. It has been achieved in this Google example.

Now I’m going to walk you through how I managed to achieve this in just a few short steps, so you too can build out markers on your 3D map. 

 

How to place markers on the 3D map

By inspecting the source code of the above example, from within the browser, we can peek behind the curtain to see how Google is achieving this.

After searching through the code, the createMarkers method seems like a great place to start: 

'Marker3d() is a function that takes in a name of the feature, and generates a 3D model on the fly. In the above map screenshot, the text would be ‘Mining District’ or ‘Gandhi Square’ for example. Pretty awesome! However, this isn’t what we are trying to understand right now. What seems more likely to hold the source of truth is this.overlay!.latLngAltToVector3(). If we search through the code once more, for this function, we find this:

Using the Google example, we will set a breakpoint and see what results from the Mining District feature being passed in for the ‘point’ variable, which has the coordinates of -26.2066872, 28.0366495. 

The latLngToMetersRelative() function takes in two different latitude and longitude objects, and returns the distance between them in meters, for x and y direction. The ‘point’ variable is the coordinates for the Mining District - but what about sceneAnchor? Hitting a breakpoint on this in the code reveals the value to be {altitude: 0, lat: -26.20227, lng: 28.04363}. As you may have guessed, this coincides with the center of the map at the time of initialisation.

So, in keeping with the idea that this is a 3D space, as opposed to a map, all markers are placed with reference to the center, and are offset in the x and y direction by an amount of meters. The code for calculating this distance is below, where distance() is imported from the Turf library.

The final piece of the puzzle is to see how these are added to the 3D space, which is just below where the createMarkers() function was called:

This map example contains some helpful features that developers may want to incorporate, especially if incorporating text into the 3D models being used as markers. As the user zooms in and out, the marker is scaling for the font to be at an appropriate size:

Another great feature is that the markers swivel to face the user as the camera is panned around:

These features are not standard out of the box though, the source code references functions to perform these movements:

Combining map styling and 3D maps

It is possible to also combine Map Styling with 3D maps. This is great for aligning a website's colour scheme or branding with the embedded map. I made one myself that you can view below! 

You can interact with the map here. When passing in the Map ID, use one that has had some styling applied to it from within the maps management page in the GCP console.

What's next? 

After completing the tutorial, and then looking through the source code for a more advanced example, it looks like great things are in place for the future of 3D Google maps, but it isn’t wrapped up in a package that can benefit developers at a wide range of skill levels… yet. 

After speaking with a Google customer engineer, this seems to be a stepping stone in a much larger picture, with this release unblocking future unannounced features. My prediction is that the developer experience will mature to be more in line with the well known Maps Javascript API. Hopefully, you will be able to provide a list of markers, with an object structure similar to the below snippet.

I would also predict a full library of 3D markers, perhaps with the ability to pass text in for labels. For now, all of this can be achieved by writing out the code yourself.

At this early stage in the release of the feature, Google seems to be a bit unsure of how to present use-cases, with many examples revolving around the idea of “doesn’t this look cool”. In my opinion, a bird’s eye view of a map is most useful when planning a driving route over a large distance. 

Where a 2D map can cause issues when trying to gain a sense of direction from what is on your phone to what is in front of you; a 3D map can allow you to reference the size and shape of surrounding buildings for perspective on where you are currently standing. Keeping this in mind, perhaps a festival app could really benefit from this. Imagine looking on your phone at the buildings around you, with a serpent wrapped around a sky-scraper, or a building pulsing in rainbow colours to highlight your destination. The user experience could be amazing on a phone!

Google has scratched the surface of this idea on their demo page, which is worth a look to spur ideas.

Find out more

If you want to learn more about Google Maps Platform, or would like help building your own 3D map - get in touch with me at Liveli. We are always up for a chat.

Back To News Stories

Connect with us