Unable to Interact with Map on Android

[selected-pixel-jameson]

Describe the bug We are loading the map, but are unable to interact with it. We have all of the scrollable gestures enabled in the config and have the background set to none in the CSS.

The map works fine on iOS devices, but not for Android.

We are using Angular to implement this solution.

When I look at the app via chrome:/inspect I can see the event listeners firing when I touch the map, but we are unable to move it around at all.

Any suggestions would be appreciated.

[tafelnl]

It's important to follow all the steps from the docs closely. A few things that come to mind:

Do you have this code snippet implemented: element.setAttribute("data-maps-id", result.googleMap.mapId);

Did you set the device pixel ratio correctly while calling createMap like this : devicePixelRatio: window.devicePixelRatio

If you tried that, and it still doesn't work, do you have a minimal reproduction available?

[selected-pixel-jameson]

@tafelnl Thank you we will take a look at these things and give it a try.

[payen83]

It's important to follow all the steps from the docs closely. A few things that come to mind:

Do you have this code snippet implemented: element.setAttribute("data-maps-id", result.googleMap.mapId);

Did you set the device pixel ratio correctly while calling createMap like this : devicePixelRatio: window.devicePixelRatio

If you tried that, and it still doesn't work, do you have a minimal reproduction available?

Thank you, this works for me.

[RajanMobix]

@payen83 Can you please tell me where i can use this ? element.setAttribute("data-maps-id", result.googleMap.mapId);

This is my code

mapOptions = { center: { lat: 51.500152, lng: -0.126236, }, zoom: 12, devicePixelRatio: window.devicePixelRatio, disableDefaultUI: true, // This is to disabel terrain/settalite, +/- and street view options };

this.map = await GoogleMap.create({ id: 'my-map', apiKey: environment.mapsKey, element: this.mapRef.nativeElement, forceCreate: true, config: this.mapOptions, });

[tafelnl]

@RajanMobix I think you are trying to use this plugin. But you are now commenting in the repo of this plugin

[payen83]

@payen83 Can you please tell me where i can use this ? element.setAttribute("data-maps-id", result.googleMap.mapId);

This is my code

mapOptions = { center: { lat: 51.500152, lng: -0.126236, }, zoom: 12, devicePixelRatio: window.devicePixelRatio, disableDefaultUI: true, // This is to disabel terrain/settalite, +/- and street view options };

this.map = await GoogleMap.create({ id: 'my-map', apiKey: environment.mapsKey, element: this.mapRef.nativeElement, forceCreate: true, config: this.mapOptions, });

@RajanMobix follow this example

[tafelnl]

Closed because it's gone stale.