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	[email protected]

Support Development

If you like this plugin and use it on your projects, please consider donating to support the development. Thank you!

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

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 💻

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