GoogleMaps
Platforms
Platform | Supported |
---|---|
Android | ✅ |
iOS | ✅ |
Installation
Android
yarn add @openmobilehub/maps-plugin-googlemaps
iOS
No additional steps are required.
Configuration
Prerequisites
Each plugin requires you to follow the @openmobilehub/maps-core
setup guide. You can find it here.
Credentials
- Create your API key according to the official documentation.
Android
- Add the following metadata tag to your
AndroidManifest.xml
file:
<manifest ...>
<application ...>
...
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="<YOUR_API_KEY>"/>
</application>
</manifest>
- [Optional] You can use Secrets Gradle Plugin to protect your API key. Read more about it here.
- [Optional] If you plan to use location services, you need to add the following permissions to your
AndroidManifest.xml
file:
<manifest ...>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application ...>
...
</application>
</manifest>
iOS
- This plugin uses
react-native-maps
underneaths, so please complete its iOS setup guide.
Usage
Before interacting with any maps plugin, it is necessary to initialize the maps module.
import {OmhMapView, OmhMapsModule, OmhMapsGoogleMapsIOSProvider} from '@openmobilehub/maps-core';
import {OmhMapsGoogleMapsProvider} from '@openmobilehub/maps-plugin-googlemaps';
import {OmhMapsOpenStreetMapProvider} from '@openmobilehub/maps-plugin-openstreetmap';
// You can use different providers for iOS and Android.
// For Android, you can use different providers for devices with and without Google Play Services.
// Remember to initialize the module before using any of its components.
OmhMapsModule.initialize({
gmsProvider: OmhMapsGoogleMapsProvider,
nonGmsProvider: OmhMapsOpenStreetMapProvider, // <- Note: Google Maps is not available on devices without Google Play Services.
iosProvider: OmhMapsGoogleMapsIOSProvider,
});
const App = () => {
return <OmhMapView />;
}
Usage Guide
Interacting with the Google Maps provider follows the same pattern as other providers, as they all implement the same interface. For a comprehensive list of available modules, components, and props, refer to the Quick Start guide.
Parity Matrix
The below matrix presents the compatibility matrix, denoting support levels for each of the functionalities across platforms.
Legend of support levels:
Support level | Symbol |
---|---|
Fully supported | ✅ |
Partially supported | 🟨 |
Not supported | ❌ |
OmhMapView
Props | Android | iOS |
---|---|---|
mapStyle | ✅ | ✅ |
rotateEnabled | ✅ | ✅ |
zoomEnabled | ✅ | ✅ |
myLocationEnabled | ✅ | ✅ |
onMapReady | ✅ | ✅ |
onMapLoaded | ✅ | ✅ |
onCameraIdle | ✅ | ✅ |
onMyLocationClicked | ✅ | ✅ |
onCameraMoveStarted | ✅ | ✅ |
Ref | Android | iOS |
---|---|---|
getCameraCoordinate | ✅ | ✅ |
setCameraCoordinate | ✅ | ✅ |
getProviderName | ✅ | ✅ |
takeSnapshot | ✅ | ✅ |
OmhMarker
Props | Android | iOS |
---|---|---|
position | ✅ | ✅ |
title | ✅ | ✅ |
clickable | ✅ | ✅ |
draggable | ✅ | ✅ |
anchor | ✅ | ✅ |
infoWindowAnchor | 🟨 | ✅ |
alpha | ✅ | ✅ |
snippet | ✅ | ✅ |
isVisible | ✅ | ✅ |
isFlat | ✅ | ✅ |
rotation | ✅ | ✅ |
backgroundColor | ✅ | ✅ |
markerZIndex | ✅ | ✅ |
icon | ✅ | ✅ |
consumeMarkerClicks |