Google Maps has traditionally been the dominant choice among developers for integrating location-based map APIs. However, recent high price increases and a substantial reduction in free API calls have caused app developers to urgently seek alternative options. Despite these challenges, Google Maps remains the most widely used SDK for embedding maps in applications. It boasts an extensive database of locations and reliable routing capabilities. The SDK offers comprehensive features essential for mobile app development, including geocoding, street view, routing, and detailed place information with search, photos, autocomplete and much more.
I was integrating google map API on my React Native Android Project. So I thought why not sharing a blog post on Map API services!
This blog post will be nothing much just an basic example of how to add google map api on your react native project in a very expressive way.
Step 1- Set up Google Cloud Console
Create a New Project on Google Cloud Console
Go to the Google Cloud Console and create a new project.
Enable the Maps SDK for Android
Go to the API Library in the Google Cloud Console and search for "Maps SDK for Android." Enable it for your project. Also, make sure the "Directions API" and "Geocoding API" are activated if your application needs these features.
Collect your Google API Key
Now switch to the Credentials page in the Google Cloud Console. Click on "Create credentials" and choose "API key." Copy the generated map api key.
Step 2- Set up your React Native Project
I hope you have an existing project but if you don't just paste these commands on your terminal to create one:
npx react-native init GoogleMapAPIIntegration
cd GoogleMapAPIIntegration
Step 3- Install Dependencies to Integrate Map API Google
We need to install these to get our job done - I mean for map api integration.
npm install react-native-maps
npm install react-native-maps-directions
npm install react-native-community/geolocation
Step 4 - Now Add Google Map API Key to your Project
Edit your AndroidManifest.xml
I think you have a structure like mine - Android>app>src>AndroidManifest.xml.
Add the google map api token like I did here below:
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Your_API_Key_Here" />
Permission Ensure
You need to make sure your AndroidManifest.xml includes permissions for internet access, as Google Maps requires internet connectivity.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Step 5- Integrating Google Map API for React Native
Get your Style Ready
I customized the Map style component. You can ignore it also.
export const dark: any = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#212121"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#212121"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "administrative.country",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "administrative.land_parcel",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative.locality",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#181818"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#1b1b1b"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#2c2c2c"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#8a8a8a"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#373737"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#3c3c3c"
}
]
},
{
"featureType": "road.highway.controlled_access",
"elementType": "geometry",
"stylers": [
{
"color": "#4e4e4e"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#000000"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#3d3d3d"
}
]
}
];
export const light: any = [
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.business",
"elementType": "labels.icon",
"stylers": [
{
"color": "#1b1a18"
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
];
Google Map API Android React Native
You don't need to use map api for react native on your component like I did. I am sure you needed extreme modifications here. I also did. But I am not providing here anything, as it will make things more complicated.
import React from 'react';
import { View } from 'react-native';
import MapView, { Marker } from '@react-native-maps';
const App = () => {
const mapRef = useRef<MapView>(null);
const [initialLocation, setInitialLocation] = useState<Location>({
latitude: 22.4853182,
longitude: 88.3502403,
latitudeDelta: 0.0922,
longitudeDelta: 0.003,
});
const [currentLocation, setCurrentLocation] = useState<Location>({
latitude: 22.4853182,
longitude: 89.3502403,
latitudeDelta: 0.0922,
longitudeDelta: 0.003,
});
return (
<View className={classNames('relative overflow-hidden w-full h-full')}
style={{flex: 1}}>
<MapView
ref={mapRef}
// scrollEnabled={!isScrollViewActive}
followsUserLocation={true}
scrollEnabled={!isScrollViewActive && !isSectionVisible}
//showsUserLocation={true}
tintColor="blue"
style={{
flex: 1,
position: 'absolute',
overflow: 'hidden',
height: SCREEN_HEIGHT,
width: SCREEN_WIDTH,
justifyContent: 'flex-end',
alignItems: 'center',
}}
pointerEvents={isASOpen ? 'none' : 'auto'}
customMapStyle={isLight ? light : dark}
initialRegion={initialLocation}>
<>
<Marker
// isPreselected={true}
// tracksInfoWindowChanges={false}
// tracksViewChanges={false}
coordinate={{
latitude: zoom?.latitude,
longitude: zoom?.longitude,
}}>
<Image
source={require('./../../src/assets/images/pickLocation.png')}
style={{width: 40, height: 40}}
/>
</Marker>
<Marker
// isPreselected={true}
//tracksInfoWindowChanges={false}
//tracksViewChanges={false}
anchor={{x: 0.5, y: 0.5}}
title="Your current Location"
coordinate={currentLocation}>
</Marker>
<Circle
center={currentLocation}
//geodesic={true}
radius={1609} // Set the radius in meters
strokeColor={
isLight
? 'rgba(0, 0, 0,255)'
: 'rgba(255, 255, 255, 0.5)'
}
fillColor={
isLight
? 'rgba(0, 0, 0,0.3)'
: 'rgba(255, 255, 255, 0.2)'
}></Circle>
</>
</MapView>
</View>
);
};
export default App;
Step 6- Run your App
Run your React Native app on an Android emulator or an actual Android device to see the Google Map integrated into it.
Please adjust your code as per your project complexity. I hope you have got some basic ideas on what is Google map API and how to integrate it on your React Native Android Application.
Frequently Asked Questions
Can I use google map api for free?
Yes, the google map map api is free untill you exceeds google map api quota.
How to map api in react js?
The integration process is pretty basic like every third party api. You just need to create a project on google cloud console, get the map api server key and integrate it with your project.
How to get Google map api key?
You need to create a fresh project on google cloud console. Go to the Credentials section and get the key.
How much google map api cost?
As per map api documentation, Google Maps offers a complimentary $200 monthly credit per account that can be applied to any of its services. Among these services, the static maps API is particularly popular, priced at only $2 per 1000 requests.
How to create google map api key?
To enable Google map api services, you need to add your project on google cloud console. You will get your key on the credentials section.
Is google map api free or paid?
No, the google map api is not entirely free. The map api cost varies on your usage limit.
What are the google map api alternative services?
There are multiple market friendly map api providers you can choose from:
