
Google Maps
@capacitor-community/capacitor-googlemaps-native
Capacitor Plugin using native Google Maps SDK for Android and iOS.
 
   
   
   
   
   
   
 
Purpose
Maps SDK for Android & iOS bring better performance and offline caching compared to JS SDK and they're free to use.
Maintainers
Project Status
| 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,onMyLocationClickiOS: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';
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() {
      
      CapacitorGoogleMaps.addMarker({
        latitude: -33.86,
        longitude: 151.20,
        title: "Custom Title",
        snippet: "Custom Snippet",
      });
      CapacitorGoogleMaps.setMapType({
        "type": "normal"
      })
    })
}
ionViewDidLeave() {
    CapacitorGoogleMaps.close();
}
Known Issues
 Right now, its not possible to allow Map view in the template to scroll along with the Page, it remains at its fixed position.
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!