capacitor-googlemaps-native

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

Right now, its not possible to allow Map view in the template to scroll along with the Page, it remains at its fixed position.