April 29, 2022
  • Announcements
  • Engineering
  • announcements
  • Capacitor
  • engineering

Announcing the Capacitor Google Maps Plugin

Thomas Vidas

Capacitor Google Maps

Today we’re excited to announce a new, open-source Capacitor plugin: @capacitor/google-maps. With @capacitor/google-maps, you can embed a native Google maps experience directly into your Capacitor app.

Let’s take a quick look at the Google Maps plugin API and how you can add a map to your app.

Adding the @capacitor/google-maps package to your project

You can add the Capacitor Google Maps plugin to your application by installing it from npm.

npm i @capacitor/google-maps

Once you’ve installed the plugin you’ll need to change some native configurations in order to let users know that you’re requesting geolocation permissions for your app.

For iOS, you’ll need to modify the Info.plist file to add the NSLocationAlwaysUsageDescription and NSLocationWhenInUseUsageDescription keys to describe to your user why you are requesting location permissions. These variables should contain an explanation for why your app uses geolocation and will appear in the permission pop-up when you first call a plugin method.

For Android, you’ll add the following lines of code to your AndroidManifest.xml. This allows your app to use the underlying geolocation permissions needed. With Android, you don’t describe the usage in your code but instead, describe it on your Google Play Store page.

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Once you’ve modified your projects to use the geolocation permissions; you’re ready to sign up for a Google Maps API Key.

Signing up for the Google Maps SDKs

In order to use the Google Maps SDK, you’ll need to create a Google Cloud account and create your project. Within your project, you should enable the Android, iOS, and JavaScript Maps SDKs. Once you’ve enabled the SDKs, you can create an API Key to include in your project. Now that you’ve set up your API Key, you can add it to your project and get a map inside your app.

Creating your first Map object

With the @capacitor/google-maps project installed and your API Key setup, it’s time to create your first Google Map element. The Google Maps plugin comes with a web component that handles a lot of the heavy lifting and automatically communicates back to the native layer for you.

<capacitor-google-map id="map"></capacitor-google-map>

To initialize the map with your API key, you’ll use the GoogleMaps.create() function like this.

import { GoogleMap } from '@capacitor/google-maps';

const apiKey = process.env.MY_MAPS_API_KEY;
const mapElement = document.getElementById('map');
const mapConfig = {
  center: {
    lat: 33.6,
    lng: -117.9,
  },
  zoom: 8,
  androidLiteMode: false,
}
const mapOptions = {
  id: ‘my-map’,
  apiKey: apiKey,
  config: mapConfig,
  element: mapElement,
}

// Create the Map Element
const map = await GoogleMap.create(mapOptions);

// Drop a Map Marker
await map.addMarkers({
  coordinate: {
    lat: 33.6,
    lng: -117.9,
  },
  title: 'Hello world',
});

And with that, you’ve created your first Google Map element!

Why use this over existing solutions?

There are a few other existing solutions for embedding maps inside your Capacitor application. But why use this one? There are a few reasons.

Capacitor Google Maps is a “core” Capacitor plugin

It is maintained by the same engineers who maintain Capacitor. Core plugins receive constant updates from the Ionic team and are guaranteed to work on day one of major versions of Capacitor. If you want a solution made by experts in Capacitor, this is the team to trust.

Capacitor Google Maps is maintained by Ionic

Open Source contributors are great, and there are plenty of excellent projects maintained by the goodwill of the community. However, having an open-source solution backed by a paid team of engineers that can help you support your next app means that this plugin won’t unexpectedly become unmaintained with little to no notice.

Capacitor Google Maps is simple to use

Once you’ve signed up for a Google Maps API key, using the Capacitor Google Maps plugin is easy and works identically across Android, iOS, and Web. With a dozen lines of JavaScript and a single HTML tag, you can have an interactable map inside your application.

Closing Thoughts

Be sure to check out our API Reference to see what else you can do with this plugin. We’re also planning a blog post with a technical deep dive into how we created this plugin, so stay tuned for more interesting stuff from the Capacitor team. This plugin is the first plugin added to the list of core Capacitor plugins since Capacitor 2 and we’re really excited to share it with the community!

Thomas Vidas

Related Posts