@capacitor-community/capacitor-googlemaps-native

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

Maintainer	GitHub	Mail
Hemang Kumar	hemangsk	[e-mail]

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

• Android
• iOS

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

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):

Grant Brits 💻 🐛 🤔	Tafel 💻 🐛 🤔	abcoskn 💻 🐛	Hyun Yang 🐛 💡	Melanie Marval 🐛	l4ke 🐛	Ben Grossman 🐛
Gercil Junio 📓	Alauddin Afif Cassandra 📓	togro 🐛 📓	selected-pixel-jameson 🐛	chikalio 🐛	Javier Gonzalez 💻	Shane B. 📖
Manuel Rodríguez 💻	Jamilu Salisu 💻	rastafan 💻	va2ron1 💻

This project follows the all-contributors specification. Contributions of any kind welcome!