README
Capacitor Google Maps Plugin
Plugin using native Maps SDK for Android and iOS.
Why ?
Maps SDK for Android & iOS bring better performance and offline caching compared to JS SDK and they're free to use.
Project Status
Features | Android | iOS | Current Status | Pending |
---|---|---|---|---|
Map Objects | ✓ |
✓ |
create() |
|
Markers | WIP |
WIP |
addMarker() is implemented which allows you to show a marker with default tooltip design. didTap |
Info windows |
Business & POIs | ✓ |
✓ |
didTapPOIWithPlaceID |
|
Lite Mode | ✓ |
✕ |
create(liteMode?: boolean) |
Not available for iOS |
Street View | ✕ |
WIP |
createStreetView() |
|
Launch URL | ✕ |
✕ |
||
Controls & Gestures | WIP |
WIP |
settings() allow to set all the map UI settings. |
Allow users to get current state of map settings. |
Events | WIP |
WIP |
||
Camera & View | ✓ |
✓ |
setCamera() |
Allow users to get current camera position |
Location | WIP |
WIP |
enableCurrentLocation() onMyLocationButtonClick , onMyLocationClick enableCurrentLocation() , myLocation() |
API wrapping needs improvement so that it becomes consistent for both platforms |
Drawing on Map | WIP |
WIP |
Shapes, Ground Overlays, Tile Overlays | |
Utility Library | ✕ |
✕ |
Getting Started
Installation
Install package from npm
npm i --save capacitor-googlemaps-native
Install plugin dependencies in native platforms
npx cap sync
Set up Google API Keys
You'll have two API keys by the end of this step. Lets proceed:
Add API key to your App
- Android in AndroidManifest.xml:
<application>
...
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_ANDROID_MAPS_API_KEY"/>
...
</application>
- On iOS, this step is little different and mentioned below.
Regsiter Plugin on Android
your-plugin/android/src/main/java/MainActivity.java
...
/* Import */
import com.hemangkumar.capacitorgooglemaps.CapacitorGoogleMaps;
...
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
/* Add Plugin Class */
add(CapacitorGoogleMaps.class);
}});
}
}
Importing & Initializing the plugin
const { CapacitorGoogleMaps } = Plugins;
/* initialize() is important for iOS,
Android doesn't need any initialization.
*/
await CapacitorGoogleMaps.initialize({
key: "YOUR_IOS_API_KEY"
});
Usage
An example with Angular
component.html
<div id="map" #map></div>
component.css
#map {
margin: 2em 1em;
height: 250px;
border: 1px solid black;
}
component.ts
@ViewChild('map') mapView: ElementRef;
async ionViewDidEnter() {
const boundingRect = this.mapView.nativeElement.getBoundingClientRect() as DOMRect;
CapacitorGoogleMaps.create({
width: Math.round(boundingRect.width),
height: Math.round(boundingRect.height),
x: Math.round(boundingRect.x),
y: Math.round(boundingRect.y),
latitude: -33.86,
longitude: 151.20,
zoom: 12
});
CapacitorGoogleMaps.addListener("onMapReady", async function() {
/*
We can do all the magic here when map is ready
*/
CapacitorGoogleMaps.addMarker({
latitude: -33.86,
longitude: 151.20,
title: "Custom Title",
snippet: "Custom Snippet",
});
CapacitorGoogleMaps.setMapType({
"type": "normal"
})
})
}
ionViewDidLeave() {
CapacitorGoogleMaps.close();
}