Leaflet: How To Open a Place In Google Map / Waze Native App and Use It To Navigate?

Issue

I am using Ionic React / React Native to develop a mobile app. I want to use Leaflet to display the static map and markers. If the user click the markers, I want to open the coordinate in Google Map / Waze / any native map application then use that native app to navigate the user into the marker.

Is there a way to open the marked place into native map apps?

Solution

Google Map provides cross-platform deep linking universal URLs. If the native Google Map app is installed. It will open with that app, otherwise, use the default web browser installed on user's device.

You can use React Native Linking API to dynamically link to a specific location.

import { Linking, Alert } from "react-native";

async function openWithGoogleMap() {
  /** Google Map API offers different URL to deep link to various locatioon and map ressources.
   * Check their docs - https://developers.google.com/maps/documentation/urls/get-started
   */
  const url =
    "https://www.google.com/maps/search/?api=1&query=47.5951518%2C-122.3316393";

  const supported = await Linking.canOpenURL(url);

  if (supported) {
    // Opening the link with some app, if the URL scheme is "http" the web link should be opened
    // by some browser in the mobile
    await Linking.openURL(url);
  } else {
    Alert.alert(`Don't know how to open this URL: ${url}`);
  }
}

Answered By - Shy Penguin