bug(GoogleMapsComponent): Does not support vector maps

[goog-bmilman]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

The Angular Google Maps Component when passed a mapID that is a vector map gets resolved to a raster map because the component references an outdated version of Maps api.

Reproduction

Steps to reproduce:

1. Create a custom map in a cloud project in the Google Maps API UI. Create a vector map
2. Pass the map ID when creating the GoogleMap component (more detailed instructions here: https://developers.google.com/maps/documentation/get-map-id)
3. Log the google map object to check if it is vector or raster

Expected Behavior

I expect the map to be a vector map

Actual Behavior

It is a raster map

Environment

• Angular: ng version did not work in blaze context
• CDK/Material:
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): ubuntu

[crisbeto]

How are you passing in the mapID? As far as I can tell we're passing it in correctly into the map constructor.

[goog-bmilman]

The component has a binding to options in the template which includes mapId. It does get propagated: the map does show in the style of the mapId passed in, but it is not a vector map.
template:
<google-map width="100%" height="100%"
[options]="options" ....etc >

in the script:
options = { mapId: "ourmapid", various key value other pairs}

Is there a different or preferred way to pass it in?

[crisbeto]

That's the correct way to pass it in. Is it possible that the mapId property is being minified by your build?

[goog-bmilman]

The mapID shows in the map object and the style appears in the output map, so I don't understand the connection to minification, could you explain more about that? Is it something where the google map typings would need to be updated so that the property does not get minified? It seems the google map typings referenced in the angular component does not have any vector related properties (there's another google map typing source we reference elsewhere that does have these elements).

[crisbeto]

Some apps optimize their code in production by minifying the property names inside of objects.

Regarding your note about typings: even if our typings don't have any vector properties, that doesn't have an effect over the runtime behavior. I've sent out #26854 to update to the latest typings for v16.

[goog-bmilman]

Thank you! I'll try it out when it's through -- it'll be good to have the typings either way.

I tried a few other things and it turns out it all has to do with browser settings: webgl was enabled but not "hardware accelerated" in the browser I was testing in. I found this page https://developers.google.com/maps/documentation/javascript/webgl/support about it for any one else that runs into this. I'm going to close this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}