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. 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-googlemaps-native

Install plugin dependencies in native platforms

npx cap sync

Set up Google API Keys

• Android
• iOS

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();
}

Known Issues