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?
CodePudding user response:
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,-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}`);
}
}