Cannot open google maps in react native webview

Question

I want to show google maps navigation page for directions. For doing so, I am opening google maps url inside a webview in react native(android). Here is my cod e:

<WebView
    source={{uri: 'http://maps.google.com/mapsdaddr=28.69875679999999,77.29257710000002'}}
    style={{height : 400, width : 320}}
  />

It just shows blank. I thought it might be https issue , but its not so. I tried "https://www.amazon.com/" and it showed fine, similarly some other web links as well. Any help is appreciated.

I copied the url and tried to go. Response was 404. Maybe you need to add some referers or header params. — Tugrul, Aug 26 '16 at 14:16

score 4 · Answer 1 · answered Aug 29 '16 at 05:35

So I came to know that Webview was not the right choice for opening google maps directions. So I used Linking Api of react-native. Here is the code snippet :

The link from which I need to open my maps,

<TouchableOpacity onPress={() => {self.startNavigation('geo:37.484847,-122.148386')}}>
       <View>
          <Text style={styles.link}>START NAVIGATION</Text>
       </View>
</TouchableOpacity>

On the click of above mentioned link, the "startNavigation" method is called:

startNavigation(url) {
    Linking.canOpenURL(url).then(supported => {
      if (supported) {
        Linking.openURL(url);
      } else {
        console.log('Don\'t know how to open URI: ' + url);
      }
    });
  }

This opened the google maps android app on my phone.

For Android 11 (and potentially later versions), also see this answer: https://stackoverflow.com/a/65114851 — Karatekid430, Aug 24 '21 at 02:51

score 3 · Accepted Answer · edited Mar 13 '20 at 07:23

3

You can not open google maps in the react native WebView. Not sure if this problem is just with react native apps or all android apps but even if you open google.com in the web view and then then click on maps it will give you an empty page. You can use Linking in react-native to open the native google-maps app or you can use google maps API to open maps inside a view.

edited Mar 13 '20 at 07:23

chandrakant

33
6

answered Aug 28 '16 at 09:44

Spider

140
6

For anyone who comes here to find a solution, this is relevant https://stackoverflow.com/questions/43214062/open-maps-google-maps-in-react-native – Lama Mar 07 '22 at 00:17

score 0 · Answer 3 · answered Aug 26 '16 at 17:43

0

The url returns 404. You might want to try this url instead: http://maps.google.com/maps/place/28.69875679999999,77.29257710000002

answered Aug 26 '16 at 17:43

Mila

598
4
9

Try this url : "https://www.google.com/maps?daddr=28.69875679999999,77.29257710000002". – Sakshi Tyagi Aug 27 '16 at 04:41

Cannot open google maps in react native webview

3 Answers3