open maps/google maps in react native

Question

I am trying to open google maps or maps in my react-native application.

When I run the app on my iPhone/simulator, I receive this error

"Don't know how to open URI:...".

What I am doing wrong?

My code:

    openGps() {
      var url = 'geo:37.484847,-122.148386'
      this.openExternalApp(url)
    }
    
    openExternalApp(url) {
      Linking.canOpenURL(url).then(supported => {
        if (supported) {
          Linking.openURL(url);
        } else {
          console.log('Don\'t know how to open URI: ' + url);
        }
      });
    }

is there a similar way to open camera app? – Sreevisakh Jul 12 '18 at 13:48 — Sreevisakh, Jul 12 '18 at 13:48

score 243 · Answer 1 · edited May 23 '23 at 20:31

243

To open url with custom label ios/android:

const scheme = Platform.select({ ios: 'maps://0,0?q=', android: 'geo:0,0?q=' });
const latLng = `${lat},${lng}`;
const label = 'Custom Label';
const url = Platform.select({
  ios: `${scheme}${label}@${latLng}`,
  android: `${scheme}${latLng}(${label})`
});

    
Linking.openURL(url);

edited May 23 '23 at 20:31

Collin Price

5,620
3
33
35

answered Dec 28 '17 at 11:36

Narek Ghazaryan

2,758
1
7
11

7

This solution is so clean! Thank you for the `label` component! – Pablo Albaladejo Apr 06 '18 at 16:19
5

change like this const scheme = Platform.OS === 'ios' ? 'maps:0,0?q=' : 'geo:0,0?q='; – Vishal Dhaduk Apr 23 '18 at 13:54
11

on google maps the marker's name is the coordinates and not the label :/ – Ilario Jan 25 '19 at 19:31
2

is it possible to add custom label to android? – MING WU Aug 30 '19 at 02:15
3

There's a nice library to do all of this and more: https://github.com/tschoffelen/react-native-map-link. – colemerrick Mar 13 '20 at 22:55
1

scheme is in wrong format. You have to replace zeroS with lat and lon. This way it produces "geo:0,0?q=41.04481,28.9976903(address)". lat and lon should be on the point at zeroS – ahmet May 12 '20 at 21:16
1

how to sent a source and destination with navigation on,the above answer is correct,it does the functionality – ashishSober May 22 '20 at 18:07
can i give params like i need to show my map on driving mode not on walking mode ? @Narek Ghazaryan – Syed Amir Ali Nov 06 '20 at 10:34
1

is there a way to show the direction name on google maps instead of the coordinates, at least on ios, you can show the custom label but on android it doesn't seem to work? – Nicolas Silva Mar 10 '21 at 18:45
1

I had to do `label = encodeURIComponent(label)` to support spaces on iOS – Simon Bengtsson Feb 21 '23 at 09:30
4

I just wanted to mention that this code broke for iOS after updating to RN 0.71.7 and I was able to fix the issue by adding `//` to `ios: 'maps://0,0?q='` – Amir5000 May 02 '23 at 23:24
@Amir5000 Came here for the same issue, thanks for this it was a lifesaver! – Ryker May 17 '23 at 13:18

score 23 · Answer 2 · edited Oct 10 '19 at 14:59

23

This is because iOS does not yet have support for geo: yet as mentioned in this SO answer. What you can do is detect the OS and:

use geo: on Android
handle iOS differently. Possibly use maps: as it will open up Apple Maps, though I'm unsure how to properly send the coordinates to it. Or maybe append it to a google maps HTTP URL and open it in the browser.

For example, your openGps function could look like this:

openGps = (lat, lng) => {
  var scheme = Platform.OS === 'ios' ? 'maps:' : 'geo:';
  var url = scheme + `${lat},${lng}`;
  Linking.openURL(url);
}

edited Oct 10 '19 at 14:59

TheMisir

4,083
1
27
37

answered Apr 04 '17 at 23:45

Michael Cheng

9,644
6
46
48

3

You can also use `http://maps.apple.com/?ll=,` or `http://maps.apple.com/?daddr=,` to start a navigation. – Thomas Kekeisen Apr 05 '17 at 08:36

score 23 · Answer 3 · answered Apr 10 '18 at 19:50

23

you can do like this:

Android:

 <TouchableOpacity onPress={() => Linking.openURL('google.navigation:q=100+101')}>

where q is the destination lat + long

IOS:

  <TouchableOpacity onPress={() => Linking.openURL('maps://app?saddr=100+101&daddr=100+102')}>

where saddr is start address and daddr is destination address lat+long

answered Apr 10 '18 at 19:50

oma

1,804
12
13

Ref: https://developers.google.com/maps/documentation/urls/android-intents#launch_turn-by-turn_navigation – Ameer Hamza Nov 18 '19 at 17:18
Thanks, DEV for the solution! – Hasnain Ali Sohrani Jan 22 '20 at 10:57
Basically you can add just daddr for IOS. This might be taken your current location and directing you to daddr location. Thanks for answer btw! <3 – feyyum Dec 07 '22 at 16:49

score 23 · Answer 4 · answered Feb 10 '20 at 14:22

23

const url = Platform.select({
  ios: `maps:0,0?q=${fullAddress}`,
  android: `geo:0,0?q=${fullAddress}`,
})

Linking.openURL(url)

answered Feb 10 '20 at 14:22

Pragnesh

404
3
15

5

I'd excuse @pragnesh for this - it's a clean, self-explanatory and actually working code. – grreeenn Oct 01 '20 at 22:01
too easy! so clean @Pragnesh – gainbrainer Apr 26 '22 at 13:26

score 12 · Answer 5 · edited Dec 19 '20 at 21:25

const latitude = "40.7127753";
const longitude = "-74.0059728";
const label = "New York, NY, USA";

const url = Platform.select({
  ios: "maps:" + latitude + "," + longitude + "?q=" + label,
  android: "geo:" + latitude + "," + longitude + "?q=" + label
});
Linking.openURL(url);

or with checking if there's a google map app on device and if not open the location in browser

const latitude = "40.7127753";
const longitude = "-74.0059728";
const label = "New York, NY, USA";

const url = Platform.select({
  ios: "maps:" + latitude + "," + longitude + "?q=" + label,
  android: "geo:" + latitude + "," + longitude + "?q=" + label
});

Linking.canOpenURL(url).then(supported => {
  if (supported) {
    return Linking.openURL(url);
  } else {
    const browser_url =
      "https://www.google.de/maps/@" +
      latitude +
      "," +
      longitude +
      "?q=" +
      label;
    return Linking.openURL(browser_url);
  }
});

With this answer the map opens along with custom label which is a good thing. But a major issue in this approach is that if I have multiple addresses with same block names in different cities then no matter which lat long I provide, it always takes me to the first city with the given block name. If there is a fix for that then this would be a good solution. — Pooja Mule, Nov 29 '21 at 12:54
This just search apple maps and google maps for the label and ignores the coordinates. — Simon Bengtsson, Feb 21 '23 at 09:24

score 10 · Answer 6 · edited May 23 '19 at 17:20

10

Working on Android with an address using the following:

Linking.openURL('https://www.google.com/maps/search/?api=1&query=address');

Replace address with your favourite address.

edited May 23 '19 at 17:20

double-beep

5,031
17
33
41

answered May 23 '19 at 17:09

Yossi

5,577
7
41
76

score 4 · Answer 7 · answered Oct 10 '19 at 05:06

To complement other answers, here's a snippet of adding a marker on Android:

    const location = `${latitude},${longitude}`
    const url = Platform.select({
      ios: `maps:${location}`,
      android: `geo:${location}?center=${location}&q=${location}&z=16`,
    });
    Linking.openURL(url);

If you want more details about Android and google maps, here's the link for the documentation: https://developers.google.com/maps/documentation/urls/android-intents

score 3 · Answer 8 · edited Aug 18 '20 at 10:50

3

I've tried this solution and it's working

const scheme = Platform.select({ ios: 'maps:0,0?q=', android: 'geo:0,0?q=' });
const latLng = `${lat},${lng}`;
const label = 'Custom Label';
const url = Platform.select({
  ios: `${scheme}${label}@${latLng}`,
  android: `${scheme}${latLng}(${label})`
});

Linking.openURL(url);

edited Aug 18 '20 at 10:50

David Buck

3,752
35
31
35

answered Aug 18 '20 at 10:13

Akhele

131
3
9

Where is the difference to this already given answer (https://stackoverflow.com/a/48006762/1574221)? – marsh-wiggle Aug 18 '20 at 11:16
I don't have the right to upvote it because I'm new that's why I did this to let them know it is working – Akhele Aug 18 '20 at 18:55

score 3 · Answer 9 · answered Jan 31 '23 at 21:49

For apple maps direction with coordinate like this

Linking.openURL(`maps://app?daddr=${latitude},${longitude}&dirflg=d&t=m`)

dirflg = The transport type.

d (by car)
w (by foot)
r (by public transit)

t = map type m standart view

daddr = destination address

score 2 · Answer 10 · answered Mar 06 '20 at 09:43

From the documentation in Apple Map Links, a little changes from @Narek Ghazaryan's answer. This is due to apple maps will query on provided "label" first. If the label or store name do not exist, it will show nothing.

So we need to add a parameter as "ll" to specify current location with the provided label / store name.

const scheme = Platform.select({ ios: 'maps:0,0?q=', android: 'geo:0,0?q=' });
const latLng = `${lat},${lng}`;
const label = 'Custom Label';
const url = Platform.select({
  ios: `${scheme}${label}&ll=${latLng}`,
  android: `${scheme}${latLng}(${label})`
});

score 2 · Answer 11 · answered Jun 04 '20 at 18:25

One solution is to use react-native-map-link lib. It opens a bottom sheet with desired options

import { showLocation } from 'react-native-map-link'

showLocation({
    latitude: 38.8976763,
    longitude: -77.0387185,
    sourceLatitude: -8.0870631,  // optionally specify starting location for directions
    sourceLongitude: -34.8941619,  // not optional if sourceLatitude is specified
    title: 'The White House',  // optional
    googleForceLatLon: false,  // optionally force GoogleMaps to use the latlon for the query instead of the title
    googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58',  // optionally specify the google-place-id
    alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
    dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
    dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
    cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
    appsWhiteList: ['google-maps'] // optionally you can set which apps to show (default: will show all supported apps installed on device)
    // appTitles: { 'google-maps': 'My custom Google Maps title' } // optionally you can override default app titles
    // app: 'uber'  // optionally specify specific app to use
})

score 2 · Answer 12 · answered Oct 25 '20 at 19:52

With the help of oma's answer, I came up with this. For the ios version, I directly wrote googleMaps instead of maps because it did not work. This is given that Google Maps is installed on the device and I tested this with a physical device. If its not installed it will go into the store. It works perfectly while starting the navigation too.

<Button
  hasText
  transparent
  onPress={() =>
    Linking.openURL(
      Platform.OS === 'ios'
        ? 'googleMaps://app?saddr=6.931970+79.857750&daddr=6.909877+79.848521'
        : 'google.navigation:q=6.909877+79.848521',
    )
 }>
    <Text>Open Maps</Text>
 </Button>

FYI - Im using the Button component from the Native Base library.

How can I add more location to ios url? there is "waypoints" to redirect to browser but its not working for redirecting to app — Necmettin Sargın, Jun 25 '21 at 15:21
one problem here is that on ios the from and the to coordinates are the same — kd12345, Jan 23 '23 at 10:28

Muhammad Numan · Answer 13 · 2021-06-12T06:52:16.640

For google map/Map direction, you can use this code

const latitude = "30.3753";
const longitude = "69.3451";
const openMapDirection = () => {
    const url: any = Platform.select({
      ios: `comgooglemaps://?center=${latitude},${longitude}&q=${latitude},${longitude}&zoom=14&views=traffic"`,
      android: `geo://?q=${latitude},${longitude}`,
    });
    Linking.canOpenURL(url)
      .then((supported) => {
        if (supported) {
          return Linking.openURL(url);
        } else {
          const browser_url = `https://www.google.de/maps/@${latitude},${longitude}`;
          return Linking.openURL(browser_url);
        }
      })
      .catch(() => {
        if (Platform.OS === 'ios') {
          Linking.openURL(
            `maps://?q=${latitude},${longitude}`,
          );
        }
      });
  };

Note: For open google map on IOS you have to add this in info.plist

<key>LSApplicationQueriesSchemes</key>
  <array>
   <string>comgooglemaps</string>
  </array>

Hi, i tried your solution and i keep getting Unsupported link — kd12345, Jan 23 '23 at 10:02

score 2 · Answer 14 · answered Aug 02 '22 at 09:50

I have created a separate component for store location and full code is as under.

Component code:

import React from "react";
import { View, Pressable, Platform, Linking } from "react-native";
import styles from "./styles";
import Text from "../Text";

const StoreLocation = ({}) => {

  /**
   * method to open google map
   */
  const openMap = () => {
    const latitude = 33.189368147027565; // latitude of your desire location
    const longitude = 73.35574341458842; // longitude of your desire location
    const scheme = Platform.select({
      ios: "maps:0,0?q=",  // if device is ios 
      android: "geo:0,0?q=", // if device is android 
    });
    const latLng = `${latitude},${longitude}`;
    const label = "your own label";
    const url = Platform.select({
      ios: `${scheme}${label}@${latLng}`,
      android: `${scheme}${latLng}(${label})`,
    });

    Linking.openURL(url);
  };

  return (
    <Pressable onPress={() => openMap()} style={styles.mapView}>
      <View>
        <Text>Open Map</Text>
      </View>
    </Pressable>
  );
};

export default StoreLocation;

if you only want to use method just copy openMap() method and change your desired longitude, latitude & label to use this method according to your app.

tested on Android

score 1 · Answer 15 · answered Mar 17 '20 at 04:45

I think react-native-launch-navigator module is a much cleaner way of doing this. Then it is simple as LaunchNavigator.navigate([50.279306, -5.163158], {start: "50.342847, -4.749904"}) .then(() => console.log("Launched navigator")) .catch((err) =>console.error("Error launching navigator: "+err));.

score 1 · Answer 16 · answered Nov 07 '21 at 15:08

1

I found this to be the easiest way to navigate from your app to Google Maps

const url = `https://www.google.com/maps/dir/?api=1&destination=lat,long&dir_action=navigate`
Linking.openURL(url);

answered Nov 07 '21 at 15:08

Ahmed Imam

1,315
2
19
42

score 0 · Answer 17 · answered Dec 11 '22 at 18:27

you can also use this solution

Linking.openURL(`https://www.google.com/maps/dir/?api=1&origin=${startPlace.latitude},${startPlace.longitude}&destination=${endPlace.latitude},${endPlace.longitude}`)

reference: https://developers.google.com/maps/documentation/urls/get-started#map-action

score -1 · Answer 18 · answered Feb 06 '23 at 08:03

-1

This Will work....

const lat = "12.914490",
const lng = "77.666512",
const lable = "Any Title",

const scheme = Platform.OS === "android" ? "geo:0,0?q=" : "maps:0,0?q=";
var latLng = `${lat},${lng}`;
var label = lable;

const url = Platform.select({
   ios: `${scheme}${label}@${latLng}`,
   android: `${scheme}${latLng}(${label})`,
});

console.log(url)

answered Feb 06 '23 at 08:03

Ranvijay Kumar Singh

455
4
5

Downvoted just because its the same as the other answers only a bit less clean – moto May 02 '23 at 17:33

open maps/google maps in react native

18 Answers18

Linked