React Native Opening Native Maps

Question

I am trying to get my button onPress function to call a function that will open apple maps or google maps depending on the device. For some reason nothing is happening when I press the button.

Here is my function:

openMap= () => {
  console.log('open directions')
    Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=');
        },
        android: () => {
            Linking.openURL('http://maps.google.com/maps?daddr=');
        }
    });
}

Here is the button:

<TouchableOpacity 
          onPress={this.openMap}
          style={styles.navigateBtn}>
            <Icon name="md-navigate" style={{ fontSize: 24 }} />
            <Text
              style={{ fontSize: 13, fontWeight: "700", lineHeight: 14 }}
            >
              NAVIGATE
                </Text>
          </TouchableOpacity>

Eventually I want to pass longitude and latitude into the openMap function to get directions but first I need to get the map to open.

Here is my import

import { View, TouchableOpacity, Modal, Platform, Alert, StyleSheet, Linking } from "react-native";
import {Header, Content, Text, Button, Icon, Card,CardItem, Title, Left, Right, Body, Container
} from "native-base";
import { Constants } from 'expo

Contraction

Answer 1

Your button seem to call this.Map in the onPress of your TouchableOpacity. It should not be this.openMap ?

Hope it's help you!

EDIT:

Try to declare your function like this inside of your component:

openMap() {
    console.log('open directions')
    Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=');
        },
        android: () => {
            Linking.openURL('http://maps.google.com/maps?daddr=');
        }
    });
}

And for your TouchableOpacity try this

<TouchableOpacity 
      onPress={() => this.openMap() }
      style={styles.navigateBtn}>
        <Icon name="md-navigate" style={{ fontSize: 24 }} />
        <Text
          style={{ fontSize: 13, fontWeight: "700", lineHeight: 14 }}
        >

Eth

@charles-oliver Demers That was a typo opps! Good catch. In my code it is "onPress={this.openMap}" still not working :( – Contraction

Did your openMap get called ? Do you see your console.log? – Eth

Try my new answer – Eth

@Charles-oliver I don't see my console.log, I am getting an error now "_this2.openMap is not a function" – Contraction

Can you put all your component in your initial answer? – Eth

@charles-oliver it says I cant put that much code without adding more text. Here is a google drive link I created: docs.google.com/a/goformz.com/document/d/… – Contraction

@charles-oliver you should have access now! – Contraction

Put the openMap function inside the component like the goBack() function. So remove the function keyword in front of openMap and copy/paste the openMap function inside the component – Eth

@charles-oliver good call! I am able to get the console message now! still must be missing something though since the map is not opening.. – Contraction

@charles-oliver I figured it out. The syntax I was using the specify the OS was wrong. I changed it to: openMap() { console.log('open directions') if (Platform.OS === "ios") { Linking.openURL('http://maps.apple.com/maps?daddr=') } else { Linking.openURL('http://maps.google.com/maps?daddr='); } }; and it seems to be working! – Contraction

Thanks for your help! Do you have skype? – Contraction

Is it possible to open up the "Default Maps" app? Like on iOS if the default maps app is "Google Maps" then it should use that. The current solution always opens it up in "Apple Maps". – Lanellelanette

@Lanellelanette I don't think you can but maybe there's a way ... Otherwise, you cans ask the user wich one he prefer to use. You can look if he have GMap if then, ask wich one he would like to use. Remember is decision and it should be good. You can use this lib to know if GMap is installed: npmjs.com/package/react-native-check-app-install – Eth

Thank you @Charles-olivierDemers for such a prompt reply! – Lanellelanette

For me, after latest iOS 14.5 update,, this opens Safari browser first then redirects to Apple Maps. It should open Map app directly. Can anyone answer? @Charles-olivierDemers – Ojibwa

@DeepaSuryawanshi It's been a long time I've not develop for iOS. Maybe someone can help you? – Eth

Answer 2

This will oepn maps in the web, then redirect to the app (if it is installed):

const openMaps = (latitude, longitude) => {
  const daddr = `${latitude},${longitude}`;
  const company = Platform.OS === "ios" ? "apple" : "google";
  Linking.openURL(`http://maps.${company}.com/maps?daddr=${daddr}`);
}

Although i would just use this library, which uses deep linking instead:

Outermost

Answer 3

    openMap= () => {
    console.log('open directions')
   let f = Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=38.7875851,-9.3906089');
        },
        android: () => {
            console.log('ANDROID')
            Linking.openURL('http://maps.google.com/maps?daddr=38.7875851,-9.3906089').catch(err => console.error('An error occurred', err));;
        }
    });

    f();
}

Ipomoea