How to Open Google Maps in React Native

To open Google Maps in a React Native application, you have several options depending on your specific requirements. Here are some common methods:

1. Using Linking API

React Native's Linking API allows you to open web URLs, and this can be used to open Google Maps with a specific location or search query. Here's a basic example:

import { Linking } from 'react-native';

// Function to open Google Maps
const openGoogleMaps = (latitude, longitude) => {
  const url = `https://www.google.com/maps/@${latitude},${longitude},12z`;
  Linking.openURL(url).catch(err => console.error('An error occurred', err));
};

// Usage
openGoogleMaps(40.748817, -73.985428); // Replace with your coordinates

2. Using react-native-maps

If you want to embed a map directly in your app, react-native-maps is a popular choice. It allows for detailed map integration and customization. Here's how you can start:

Install the package:

npm install react-native-maps --save-exact

Import and use in your component:

import MapView from 'react-native-maps';

// Inside your component's render method
<MapView
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
/>

Customize as needed:
You can add markers, polygons, and more to your map.

3. Using External Map Applications

To open an external map application like Google Maps or Apple Maps, you can use libraries like react-native-map-link, which provides options to open a location in various map applications.

import { Popup } from 'react-native-map-link';

// Usage
<Popup
  isVisible={this.state.isVisible}
  onCancelPressed={() => this.setState({ isVisible: false })}
  onAppPressed={() => this.setState({ isVisible: false })}
  onBackButtonPressed={() => this.setState({ isVisible: false })}
  modalProps={{ // you can put all react-native-modal props inside.
      animationIn: 'slideInUp'
  }}
  appsWhiteList={['google-maps']} // optionally you can set which apps to show (default: will show all supported apps installed on device)
  options={{ /* See `showLocation` method above, this accepts the same options */ }}
  style={{ /* Optional: you can override default style by passing your values here */ }}
/>

4. Custom URL Scheme (iOS)

For iOS, you can use a custom URL scheme to open the Google Maps app:

const openGoogleMapsApp = (latitude, longitude) => {
  const url = `comgooglemaps://?center=${latitude},${longitude}`;
  Linking.canOpenURL(url).then((supported) => {
    if (supported) {
      Linking.openURL(url);
    } else {
      console.error("Can't handle URL: " + url);
    }
  });
};

Choosing the Right Approach

• Use Linking API for a quick and simple solution to open maps in a browser.
• Choose react-native-maps for a fully integrated map experience within your app.
• Opt for external map applications if you prefer using the native map apps on the user's device.
• Use custom URL schemes for specific platform requirements (like opening the Google Maps app on iOS).

Remember to test your implementation on both Android and iOS, as behavior can differ between platforms.