Using compass with Google Maps

Capacitor
1

Hello,

I have implemented a map using the Capacitor plugin “Google Maps”.
I would like to orient the map depending of the user device orientation.

To do this I have used the Capacitor plugin “Motion” to get the orientation of the device using the key webkitCompassHeading and I synced it with the map using the method setCamera and the key bearing. So It works as expected.

However, it doesn’t work with Android because the plugin Motion return the information relative to the initial orientation of the device and not the “compass” orientation (based on the North). Also, I don’t know if there is a better way to manage this. Ideally, this should be an option of the plugin Google Maps to enable or disable the compass mode but I don’t think this one exists :confused:

So my questions are:

  1. Is there a way to get the compass orientation (equivalent to webkitCompassHeading) on Android?
  2. Is it a good way to manage the orientation of the map or is there a better way to manage it?
  3. Is there a way to manage it directly and only with the plugin Google Maps?

Thanks for your help,
Loïc

2

+1

I’m using mapbox and also just need a source for the compass.

3

Hello @daheadcracker,
After trying multiple things, I finally switch to another plugin to manage the orientation of the device:
Device Orientation.

This plugin uses Cordova but is compatible with Capacitor. It returns the compass orientation correctly for IOS and (± for) Android.

Example:

var subscription = this.deviceOrientation.watchHeading().subscribe(
  (data: DeviceOrientationCompassHeading) => {…}; // data.trueHeading = the compass value
);

Regards,
Loïc

1 Like