AdvancedMarkers alternative to avoid mapId

[leonardolessa]

Hi guys,

I have been building a web application that uses @vis.gl/react-google-maps, and I’m very satisfied with the results. The library seems to be well-maintained, unlike react-google-maps/api. Everything works perfectly when upgrading my app’s dependencies.

After implementing many features and building my environment around the library, I came across a very unpleasant situation.

I need to display my map in hybrid mode, but when using the new map ID feature (cloud styling), Google removed the ability to configure POI appearance. Basically, I cannot use a map ID and hybrid mode while removing POIs.

Google has washed its hands of the issue (https://issuetracker.google.com/issues/180554122). Their cloud styling is essentially for the roadmap only, and there is no option to style other map types.

The problem is that I already have plenty of advanced markers working in production. Refactoring everything would require a lot of effort, and even if I did, I’m not sure the performance would be good.

I tried asking a question on Stack Overflow, but it seems that if we present arguments or non-binary options, they tag our question as opinion-based, as if there were too many possible solutions. I find this unfortunate, as people facing the same issue could share ideas there.

So, I’m opening the discussion here, as you guys probably have an ecosystem most similar to my app.

Right now, I think I have two options:

• Remove the map ID and refactor my AdvancedMarkers to use OverlayLayer (directly from the Google Maps API, since vis.gl/react-google-maps doesn’t implement it), but I’m concerned about performance.
• Remove the map ID, discard my AdvancedMarkers, and use a deck.gl layer to display my pins and cards.
  Deck.gl seems better in terms of performance, but rendering is more complex since text elements are independent of icons. This means I’d have to put in more effort to achieve the same result. On the other hand, OverlayLayer would retain the same "HTML" logic.

Is there any option using mapId?
Did any of you have the same problem, how did you solve it?

Many thanks.

[usefulthink]

We used to use a custom OverlayView to achieve higher performance before AdvancedMarkers were introduced, so that could definitely be an option for you in terms of performance and API. You can pretty much build an almost 1:1 replacement of the AdvancedMarker component based on the OverlayView – the only limitation is that you can't use the collision-handling available to advanced markers.

Another thing you could try is to use a map with mapId and the satellite mapType. Then use a deck.gl overlay to render labels and other features you need on top of the map. This could be a viable option if you want to switch to deck.gl anyways.

And finally, I don't think that the last word regarding styling for hybrid maps has been spoken. The cloud-based map styling features are still actively being worked on, so there might also be updates in that area.