Google Maps | Code with Beto

Welcome back my friend! 🤓

Google Maps is a web mapping and consumer application offered by Google. It is used to display maps, directions, and other information about locations.

About this app

In this project we learn how to use Google Maps API to create a simple app that shows the user the direction to a place

Resources

Init project

npx create-expo-app google-maps-react-native

Install dependencies

npx expo install expo-location dotenv react-native-maps react-native-maps-directions

Origin location

To find your geolocation origin, you can enter in Google map and click where you want, it will show the geolocation

const [origin, setOrigin] = React.useState({
  latitude: 33.640411,
  longitude: -84.419853,
});
return (
  <MapView
    initialRegion={{
      latitude: origin.latitude,
      longitude: origin.longitude,
      latitudeDelta: 0.09,
      longitudeDelta: 0.04,
    }}
    // here there are other interesting props
    // showsUserLocation={true} // Shows where the user is.
    // followsUserLocation={true} // if the user is walking the map will move.
    //
  />
);

📍Markers

Markers are specific points in the map

import MapView, { Marker } from "react-native-maps";
return (
  <MapView style={styles.map}>
    <Marker
      draggable
      coordinate={origin}
      image={carImage} // Custom 📍 marker
      onDragEnd={(direction) => setOrigin(direction.nativeEvent.coordinate)}
      // other interesting props
      // title="My car" // when the user click shows a title
      // description="This is my car" // when the user click shows a descripcion
    />
  </MapView>
);

Polyline

If your app requires to have a straight line in the map between two points. You can use Polyline component.

Advance Directions

Create a project or access an existing project in Google Cloud Console
Enable Direction API.
Get the credentials
Add the env variables

Add plugins babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    // add the plugins.
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env",
          blacklist: null,
          whitelist: null,
          safe: false,
          allowUndefined: true,
        },
      ],
    ],
  };
};

API directions

This service allows to show what is the road to get to the destination

import MapViewDirections from "react-native-maps-directions";
// Component
return (
  <MapViewDirections
    origin={origin}
    destination={destination}
    apikey={GOOGLE_MAPS_KEY}
    strokeColor="black"
    strokeWidth={5}
  />
);

With expo-location you can require the access of the user location.

Import library:

import * as Location from "expo-location";

function to get the location.

async function getLocationPermission() {
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status !== "granted") {
    alert("Permission denied");
    return;
  }
  let location = await Location.getCurrentPositionAsync({});
  const current = {
    latitude: location.coords.latitude,
    longitude: location.coords.longitude,
  };
  setOrigin(current);
}

Conclusion

Making this app will enable you to get familiar with the Google Maps API and Maps with React Native.

👍 Want to become a master in React Native? Check the React Native Course

Links

Youtube GitHub Download

Go back to Projects