1.2.0 • Published 2 years ago
@capacitor-community/capacitor-googlemaps-native v1.2.0
Purpose
Maps SDK for Android & iOS bring better performance and offline caching compared to JS SDK and they're free to use.
Maintainers
Maintainer | GitHub | |
---|---|---|
Hemang Kumar | hemangsk | hemangsk@gmail.com |
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. Marker icons can be set using URL. Event: didTap | Info windows |
Business & POIs | ✓ | ✓ | Tap on any places of interest Event: 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 | android: enableCurrentLocation() onMyLocationButtonClick , onMyLocationClick iOS: 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-community/capacitor-googlemaps-native
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
Android in AndroidManifest.xml:
<application>
...
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_ANDROID_MAPS_API_KEY"/>
...
</application>
As of Capacitor 3, the plugin needs to be registered in MainActivity.java:
import com.hemangkumar.capacitorgooglemaps.CapacitorGoogleMaps;
//...
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// ...
registerPlugin(CapacitorGoogleMaps.class);
}
}
iOS
- On iOS, this step is little different and mentioned below.
Importing & Initializing the plugin
import { CapacitorGoogleMaps } from '@capacitor-community/capacitor-googlemaps-native';
/* 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();
}
Known Issues
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!