capacitor-map-link

Open the map app of the user's choice with a specific location.

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

Using the showLocation Function

Using the showLocation function will show an action sheet (@capacitor/action-sheet)

import { CapMapLink } from 'capacitor-map-link';

CapMapLink.showLocation({
  latitude: 38.8976763,
  longitude: -77.0387185,
  sourceLatitude: -8.0870631, // optionally specify starting location for directions
  sourceLongitude: -34.8941619, // required if sourceLatitude is specified
  title: 'The White House', // optional
  googleForceLatLon: false, // optionally force GoogleMaps to use the latlon for the query instead of the title
  googlePlaceId: 'ChIJGVtI4by3t4kRr51d_Qm_x58', // optionally specify the google-place-id
  alwaysIncludeGoogle: true, // optional, true will always add Google Maps to iOS and open in Safari, even if app is not installed (default: false)
  dialogTitle: 'This is the dialog Title', // optional (default: 'Open in Maps')
  dialogMessage: 'This is the amazing dialog Message', // optional (default: 'What app would you like to use?')
  cancelText: 'This is the cancel button text', // optional (default: 'Cancel')
  appsWhiteList: ['google-maps'], // optionally you can set which apps to show (default: will show all supported apps installed on device)
  naverCallerName: 'com.example.myapp', // to link into Naver Map You should provide your appname which is the bundle ID in iOS and applicationId in android.
  appTitles: { 'google-maps': 'My custom Google Maps title' }, // optionally you can override default app titles
  app: 'uber', // optionally specify specific app to use
  directionsMode: 'walk', // optional, accepted values are 'car', 'walk', 'public-transport' or 'bike'
});

Adding URL Schemes to Info.plist

To ensure your app can properly handle URL schemes, you need to add the required schemes to the Info.plist file of your iOS project. This allows the app to check and open URLs with these schemes.

Example Info.plist

Here is an example of how your Info.plist should look with the URL schemes added:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>maps</string>
        <string>comgooglemaps</string>
        <string>citymapper</string>
        <string>uber</string>
        <string>lyft</string>
        <string>transit</string>
        <string>truckmap</string>
        <string>waze</string>
        <string>yandexnavi</string>
        <string>moovit</string>
        <string>yandexmaps</string>
        <string>yandextaxi</string>
        <string>kakaomap</string>
        <string>tmap</string>
        <string>szn-mapy</string>
        <string>mapsme</string>
        <string>osmandmaps</string>
        <string>gett</string>
        <string>nmap-disabled</string>
        <string>dgis</string>
        <string>lftgpas</string>
        <string>petalmaps</string>
        <string>com.sygic.aura</string>
    </array>
    ...
</dict>
</plist>

Adding URL Schemes to AndroidManifest.xml

To ensure your app can properly handle URL schemes, you need to add the required schemes to the AndroidManifest.xml file of your Android project. This allows the app to check and open URLs with these schemes.

Example AndroidManifest.xml

Here is an example of how your AndroidManifest.xml should look with the URL schemes added:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.app">

    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="http" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="geo" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="google.navigation" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="applemaps" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="citymapper" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="uber" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="lyft" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="transit" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="truckmap" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="waze" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="yandexnavi" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="moovit" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="yandexmaps" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="yandextaxi" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="kakaomap" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="tmap" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="mapycz" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="mapsme" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="osmand.geo" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="gett" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="nmap" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="dgis" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="lftgpas" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="petalmaps" />
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="com.sygic.aura" />
        </intent>
    </queries>

    <application
        android:name=".MainApplication"
        android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher">
        ...
    </application>
</manifest>

Install

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

API

• showLocation(...)
• getApps(...)
• Interfaces
• Type Aliases

showLocation(...)

showLocation(options: ShowLocationProps) => Promise<any>

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | ShowLocationProps |

Returns: Promise<any>

getApps(...)

getApps(options: GetAppsProps) => Promise<GetAppsResponse[]>

| Param | Type | | ------------- | --------------------------------------------------------------- | | options | ShowLocationProps |

Returns: Promise<GetAppsResponse[]>

Interfaces

ShowLocationProps

| Prop | Type | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | | latitude | string | number | | | longitude | string | number | | | address | string | null | latitude and longitude will be ignored if the address field is set | | sourceLatitude | number | null | | | sourceLongitude | number | null | | | appleIgnoreLatLon | boolean | | | alwaysIncludeGoogle | boolean | | | googleForceLatLon | boolean | | | googlePlaceId | string | number | | | title | string | null | | | app | MapId | null | | | dialogTitle | string | null | | | dialogMessage | string | null | | | cancelText | string | null | | | appsWhiteList | string[] | null | | | appTitles | Partial<Record<MapId, string>> | | | naverCallerName | string | | | directionsMode | DirectionMode | |

Type Aliases

MapId

'apple-maps' | 'google-maps' | 'citymapper' | 'uber' | 'lyft' | 'transit' | 'truckmap' | 'waze' | 'yandex' | 'moovit' | 'yandex-maps' | 'yandex-taxi' | 'kakaomap' | 'tmap' | 'mapycz' | 'maps-me' | 'osmand' | 'gett' | 'navermap' | 'dgis' | 'liftago' | 'petalmaps' | 'sygic'

Partial

Make all properties in T optional

{ [P in keyof T]?: T[P]; }

Record

Construct a type with a set of properties K of type T

{ [P in K]: T; }

DirectionMode

'car' | 'walk' | 'public-transport' | 'bike'

GetAppsResponse

{ id: MapId; name: string; /** function to link user to map app */ open: () => Promise<string | null>; }

GetAppsProps

ShowLocationProps