For Progressive Web Apps (PWA), invoking Google Maps using the maps URL on Android by default, launches the native version of Google Maps, if it is installed on the device. See Maps URL guidelines.
In some situations, we would like to use the browser-based Google Maps, regardless if the native app is installed on a device or not.
In my Ionic 4 / Angular 8 / Capacitor based application, I had a situation where loading Google Driving Directions in the native app would not properly set the source and destination addresses. I also prefer to use the browser-based map as it requires less resources. By changing the URL parameters it is possible to force launch the browser app all the time, by simply replacing the URL below,
https://maps.google.com/maps/dir/?api=1&destination= + destination
with —
https://maps.google.com?saddr=Current+Location&daddr= + destination
I was able to achieve the desired effect.
For a more detailed code implementation. See below:
async showDrivingDirections(place: any) { const destination = encodeURI(place.name); if (this.platform.is('android')) { if (this.platform.is('mobileweb')) { await Browser.open({url: 'https://maps.google.com?saddr=Current+Location&daddr=' + destination}); } else { await Browser.open({url: 'https://maps.google.com/maps/dir/?api=1&destination=' + destination}); } } else { window.open('https://maps.google.com/maps/dir/?api=1&destination=' + destination, '_self'); } }
This implementation supports invocation of Google Maps from iOS and Android app with provision to distinguish Progressive Web App (PWA) to achieve uniform behavior for all versions of the apps.