Let us look at what all things can you do with React Native Maps. React Native is a popular choice when it comes to app development.
Installation
npm i react-native-maps
Setup (android)
<application>
<!– You will only need to add this meta-data tag, but make sure it’s a child of application –>
<meta-data
android:name=
“com.google.android.geo.API_KEY”
android:value=
“YOUR_API_KEY”/> <!—Your API key goes here. –>
<!– You will also only need to add this uses-library tag –>
<uses-library android:name=
“org.apache.http.legacy”
android:required=
“false”/>
</application>
Showing map
<MapView
style={styles.map}
//specify our coordinates.
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
This will show the location which we specify in lat and long
Displaying maps with state
const [region, setRegion] = useState({
latitude:
51.5079145,
longitude:
-0.0899163,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
});
<MapView
style={styles.map}
//specify our coordinates.
region={region }
/>
Changing the map type
It can be done with the prop mapType which have the following inputs:
The map type to be displayed.
– standard: standard road map (default)
– none: no map Note Not available on MapKit
– satellite: satellite view
– hybrid: satellite view with roads and points of interest overlayed
– terrain: topographic view
– mutedStandard: more subtle, makes markers/lines pop more (iOS 11.0+ only)
Adding a marker in maps
import { Marker } from
“react-native-maps”;
const [region, setRegion] = useState({
latitude: 51.5079145,
longitude: -0.0899163,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
});
<MapView
style={styles.map}
region={ region } //your region data goes here.
>
{/*Make sure the Marker component is a child of MapView. Otherwise it won’t render*/}
<Marker coordinate={ region } />
</MapView>
Changing the color
<Marker
coordinate={ region }
pinColor=”green”
/>
Changing the marker image
<Marker
coordinate={{ latitude: 52.5200066, longitude: 13.404954 }}
image={require(“./”)} //uses relative file path.
/>
Using <polyline /> in React Native Maps
import { Polyline } from “react-native-maps”;
const region1 = {
latitude: 35.6762,
longitude: 139.6503,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
};
const region2 = {
latitude: 35.6074,
longitude: 140.1065,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
};
<MapView style={styles.map} initialRegion={ region1 }>
<Polyline
coordinates={[ region1, region2]} //specify our coordinates
strokeColor={“#000”}
strokeWidth={3}
lineDashPattern={[1]}
/>
</MapView>
These are some of the things that React Native Maps can do. If you are looking for any kind of app development services, please feel free to reach out to us today!
Very useful