How to open a map (navigator) in the Capacitorjs application

As a developer, I often faced the task of integrating maps and navigators into mobile applications. So, I wrote a convenient library to solve this task. In this article, I will show you how you can add the ability to open maps and navigators in your application using the capacitor-map-link plugin https://www.npmjs.com/package/capacitor-map-link.

Step 1: Installing the necessary packages

npm install capacitor-map-link @capacitor/action-sheet capacitor-linking
npx cap sync

The library requires two dependencies: @capacitor/action-sheet for displaying the Action Sheet and capacitor-linking to determine which applications are available on the phone.

Step 2: Using the showLocation function

The showLocation function displays an Action Sheet with a selection of applications to open the map.

Example usage:

import { CapMapLink } from 'capacitor-map-link';
CapMapLink.showLocation({
latitude: 38.8976763,
longitude: -77.0387185,
sourceLatitude: -8.0870631, // optionally specify the starting location for the route
sourceLongitude: -34.8941619, // required if sourceLatitude is specified
title: 'The White House', // optional
googleForceLatLon: false, // optionally forces GoogleMaps to use coordinates instead of the name
googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify google-place-id
alwaysIncludeGoogle: true, // optionally always adds Google Maps on iOS and opens in Safari (default: false)
dialogTitle: 'Choose an app', // optional (default: 'Open in Maps')
dialogMessage: 'Which app would you like to use?', // optional (default: 'What app would you like to use?')
cancelText: 'Cancel', // optional (default: 'Cancel')
appsWhiteList: ['google-maps'], // optionally specify which apps to display (default: all supported apps installed on the device)
naverCallerName: 'com.example.myapp', // for Naver Map, specify the name of your app (bundle ID for iOS and applicationId for Android)
appTitles: { 'google-maps': 'My Google Maps' }, // optionally override default app names
app: 'uber', // optionally specify a specific app to use
directionsMode: 'walk', // optionally, valid values: 'car', 'walk', 'public-transport' or 'bike'
});

All parameters marked as "optional" are not required.

After calling the showLocation function, it will check the available applications. If more than one application is available, an Action Sheet will be displayed for selection. If only one application is found, it will open automatically without selection.

Step 3: Adding URL schemes to Info.plist

To ensure your application correctly handles URL schemes on iOS, add the necessary schemes to the Info.plist file.

Example Info.plist https://github.com/AntonSeagull/capacitor-map-link?tab=readme-ov-file#example-infoplist

Step 4: Adding URL schemes to AndroidManifest.xml

To ensure your application correctly handles URL schemes on Android, add the necessary schemes to the AndroidManifest.xml file.

Example AndroidManifest.xml https://github.com/AntonSeagull/capacitor-map-link?tab=readme-ov-file#example-androidmanifestxml

If you need help with the integration or have any questions, feel free to contact me on Telegram.

CapacitorJS map open map capacitorjs english