Integrate Google Maps in an Ionic + Capacitor Application for Android and iOS

Developers building hybrid mobile apps with Ionic and Capacitor often need to display interactive maps. Integrating Google Maps gives users precise location context, route guidance, and a familiar navigation interface.
This step-by-step guide explains how to connect the Google Maps API to an Ionic Capacitor project and run it seamlessly on both Android and iOS devices.

1. Enable Google Maps APIs

1. Visit the Google Cloud Console.
2. Create a new project or use an existing one.
3. From APIs & Services → Library, enable:
   • Maps SDK for Android
   • Maps SDK for iOS
4. Under Credentials, generate separate API keys for each platform and restrict them to your app’s package name or bundle ID.

2. Install the Capacitor Google Maps Plugin

Use the community plugin that bridges the native SDKs with Ionic’s web view:

npm install @capacitor/google-maps
npx cap sync

This adds the necessary native dependencies to both mobile platforms.

3. Configure Android

1. Open android/app/src/main/res/values/strings.xml and add:

<string name="google_maps_key">YOUR_ANDROID_API_KEY</string>

2. In AndroidManifest.xml, include:

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

<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="@string/google_maps_key" />

These entries allow the app to access the internet, read GPS data, and authenticate with Google Maps.

4. Configure iOS

1. Open the iOS project in Xcode (ios/App/App.xcworkspace).
2. In the Info tab, add a new key:

GMSServicesApiKey : YOUR_IOS_API_KEY

3. Add location-permission strings to Info.plist:

<key>NSLocationWhenInUseUsageDescription</key>
<string>We use your location to show nearby places.</string>

5. Add Google Maps to an Ionic Page

home.page.html

<ion-content>
  <div #map id="map" style="height: 100%;"></div>
</ion-content>

home.page.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { GoogleMap } from '@capacitor/google-maps';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
})
export class HomePage {
  @ViewChild('map') mapView!: ElementRef;
  map!: GoogleMap;

  async ionViewDidEnter() {
    this.map = await GoogleMap.create({
      id: 'main-map',
      element: this.mapView.nativeElement,
      apiKey: 'YOUR_API_KEY',
      config: {
        center: { lat: 40.7128, lng: -74.0060 },
        zoom: 10,
      },
    });
  }
}

This initializes a native Google Map inside the Ionic view with a specified center and zoom level.

6. Run the App on Devices

To test the integration:

ionic cap run android
ionic cap run ios

Testing on real hardware is recommended, since not all emulators render native maps correctly.

7. Add Interactivity (Optional)

You can add markers and handle events such as marker clicks:

await this.map.addMarker({
  coordinate: { lat: 40.7128, lng: -74.0060 },
  title: 'Sample Location',
  snippet: 'Tap to see details',
});

this.map.setOnMarkerClickListener((event) => {
  console.log('Marker clicked', event);
});

This allows the app to respond to user interactions and display information about specific points.

Final Thoughts

Integrating Google Maps with Ionic and Capacitor transforms a hybrid mobile app into a location-aware experience. By enabling the native SDKs, configuring API keys, and using the Capacitor Google Maps plugin, developers can deliver smooth, high-performance maps on both Android and iOS.

For production use, remember to:

• Restrict API keys to your app’s identifiers.
• Enable billing on the Google Cloud project.
• Test all permissions thoroughly on physical devices.

With this setup, your Ionic application gains the power and familiarity of Google Maps across platforms—ideal for travel, logistics, or any app that relies on geolocation.