Build Maps Component for Your App

Learn how to add Maps functionality to your custom React Native and Django app with Crowdbotics.

What is the Maps component and how much does it cost?

A feature that adds interactive maps to your mobile app to make it easier for users to find your locations. It usually takes between 10.8 and 13.2 hours and costs $900 to add Maps to an application.

How does the Maps component work?

This feature displays a map that lists locations as a user scrolls the map view. Locations can be shown based on the user's location or predetermined points of interest. Live location updates can be configured within the map view.

What is the Maps component used for?

Here are some common Maps user stories in a custom app build:

As a user, I would like to see locations of interest near me. As a user, I would like to see my own location relative to other points on the map.

Maps component README file

Maps

Setup

Install the required dependencies:

yarn add react-native-maps

Open /src/navigator/mainNavigator.js and import the stack navigator defined in navigator.js.

import Maps from "../features/<module_directory>/navigator.js";

And then add it to the navigation:

//@BlueprintImportInsertion
Maps: {
screen: Maps
},

Update the map's initial location in: src/features/<module_directory>/index.js

This is the default value (San Francisco):

const region = {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
};

Android

Add Google Maps Key

Update android/app/src/main/AndroidManifest.xml with the following XML meta tags:

iOS

Build configuration on iOS

cd ios
pod install

App Store Submission

The app's Info.plist file must contain a NSLocationWhenInUseUsageDescription with a user-facing purpose string explaining clearly and completely why your app needs the location, otherwise Apple will reject your app submission.

Enabling Google Maps on iOS

https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md#enabling-google-maps-on-ios-react-native-all-versions

‍

This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.

Browse our community components for the Maps component.

Full Maps component code

import React from "react";
import { View } from "react-native";
import { styles } from './styles'
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";

const Maps = () => {
  const region = {
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421
  }

  return (
    <View style={styles.view}>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={styles.map}
        initialRegion={region}
      />
    </View>
  );
}

export default {
  name: "Maps",
  screen: Maps,
  reducer: null,
  actions: null
}

This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.

Browse our community components for the Maps component.

Recommended components for you

Apple Sign Up

Facebook Sign Up

Chat

Privacy Policy

Splash Screen

Google Sign Up

All component categories

Add this feature to your project

Snap Maps into your app along with our full library of prebuilt components.

Import layouts directly from Figma and visually build backend data models.

Two-way GitHub sync and automated deployments to Heroku will have your app up and running in minutes.

Add Maps to My App

Build with more components from Crowdbotics

Crowdbotics can build your custom app with Maps functionality and hundreds of other components.

Go from specs to code 4X faster than conventional development.

Our expert PMs and developers are standing by to provide a detailed quote and build timeline.

Start Building

Search All Components: