How to display custom vector tiles on Google Maps

Question

The goal is to display large amount of data on Google Maps. By large amount I mean around 10 millions of segments stored in PostgreSQL database. The segments represent some characteristics of roads, so segments should overlay the roads in base map. The segment properties may change over time.

The best technical solution for this problem is to use custom tile server (please correct if wrong).

According to Google Maps JS API, I found out two ways to draw over the map using custom tile server:

using GeoJson/KML data (https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson)
using PNG images (https://developers.google.com/maps/documentation/javascript/maptypes#ImageMapTypes)

I have tried both. The first one does not fit my needs because GeoJson appears too large, what results in performance issues. The second one is bad from UX point of view, because it is using raster tiles, whereas nowadays we should use vector tiles. I also looked at OpenLayers / Leaflet, but didn't find an official way to go with Google Maps (see https://github.com/mapbox/mapbox-gl-js/issues/1791).

The key here would be to use vector tiles, however I cannot manage to render vector tiles (MVT) on Google Maps.

Is there any ways at all to render vector tiles on Google Maps Platform?

That's a fork of mapbox-gl-js giving you full control over rendering of specific tiles, also provides vector tile overlay for google maps. — LuisTavares
@LuisTavares it seems to me it violates Google's ToS: "you must not access map tiles or imagery through interfaces or channels (including undocumented Google interfaces) other than the Maps API(s)." Isn't it? — YTerle
"In this demo we show how basic tile rendering can be used in a google map overlay to render vector tiles on a google map" — LuisTavares

YTerle YTerle · Accepted Answer · 2020-01-14T11:42:16

I've reached Google Maps Platform support and they advised me to use a deck.gl.

It is a technology for displaying huge data sets on a map, including Google Maps. It uses official Google Maps API for rendering, especially OverlayView.

There is a good blog post about Google Maps & deck.gl here: https://cloud.google.com/blog/products/maps-platform/high-performance-data-visualizations-google-maps-platform-and-deckgl

I've managed to display custom vector tiles on Google Maps using angular and here is the sample repo: https://github.com/yterletskyi/deckgl-angular

BTW, thanks to LuisTavares solution about the https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer library which relies on OverlayView too. I have not tried it but the approach is the same as in deck.gl so there should not by any issues.

UPD:

After playing around with deck.gl, the problem turned to implement this on mobile iOS & Android platforms. After some research I had contacted Google Support but unfortunately there seems to be no solution to this. Google Support quote:

Hello Yura,

Unfortunately there is no way to render vector tiles with the mobile APIs. I also have no recommendations for services that allow you to do this with the Google Maps API.

My apologies,

How to display custom vector tiles on Google Maps

2 Answers