Plugin using native Maps SDK for Android and iOS.
Maps SDK for Android & iOS bring better performance and offline caching compared to JS SDK and they're free to use.
Features | Android | iOS | Current Status | Pending |
---|---|---|---|---|
Map Objects | create() |
|||
Markers | 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 | createStreetView() |
|||
Launch URL | ||||
Controls & Gestures | settings() allow to set all the map UI settings. |
Allow users to get current state of map settings. | ||
Events | ||||
Camera & View | setCamera() |
Allow users to get current camera position | ||
Location | enableCurrentLocation() onMyLocationButtonClick , onMyLocationClick enableCurrentLocation() , myLocation() |
API wrapping needs improvement so that it becomes consistent for both platforms | ||
Drawing on Map | Shapes, Ground Overlays, Tile Overlays | |||
Utility Library |
npm i --save capacitor-googlemaps-native
npx cap sync
You'll have two API keys by the end of this step. Lets proceed:
- 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.
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);
}});
}
}
const { CapacitorGoogleMaps } = Plugins;
/* initialize() is important for iOS,
Android doesn't need any initialization.
*/
await CapacitorGoogleMaps.initialize({
key: "YOUR_IOS_API_KEY"
});
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();
}