How to open Apple Maps using Flutter/Dart?

Question

Our Flutter App shows a number of locations using Google Maps, if available, or else using the local browser.

Although we had already previously uploaded a binary code for iOS which was accepted by Apple and successfully published in the App Store, now that we have added some more locations and thus attempted to publish a new version, Apple has rejected our binary, stating that it is mandatory to use "Apple Maps" instead of anything that starts with a "G", like Google...

The rejection message reads as follows:

Your app's location feature is not integrated with the built-in mapping functionality, which limits users to a third-party maps app.

Next Steps

To resolve this issue, please revise your app to give users the option to launch the native Apple Maps app.

I have found that there exists some documentation about a Javascript library named MapKit JS, which serves precisely the purpose of interacting with Apple Maps: https://developer.apple.com/maps/mapkitjs/

<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>

<script>
        mapkit.init({
            authorizationCallback: function(done) {
                var xhr = new XMLHttpRequest();
                xhr.open("GET", "/services/jwt");
                xhr.addEventListener("load", function() {
                    done(this.responseText);
                });
                xhr.send();
            }
        });

        var Cupertino = new mapkit.CoordinateRegion(
            new mapkit.Coordinate(37.3316850890998, -122.030067374026),
            new mapkit.CoordinateSpan(0.167647972, 0.354985255)
        );
        var map = new mapkit.Map("map");
        map.region = Cupertino;
        </script>

Nevertheless, I could really use some help no how to connect with this MapKit JS using DART, instead of JAVA, for our Flutter application.

Thank you immensely for your kind help!

Daniel

Answer 1

Firstly, install the url_launcher plugin

Secondly, add the below code in Info.plist:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>googlechromes</string>
    <string>comgooglemaps</string>
</array>

Thirdly:

var urlAppleMaps = 'https://maps.apple.com/?q=$lat,$lng';

if (await canLaunch(urlAppleMaps)) {
  await launch(urlAppleMaps);
} else {
  throw 'Could not launch $url';
}

We can use it like this:

 _launchMap(BuildContext context, lat, lng) async {
    var url = '';
    var urlAppleMaps = '';
    if (Platform.isAndroid) {
      url = "https://www.google.com/maps/search/?api=1&query=${lat},${lng}";
    } else {
      urlAppleMaps = 'https://maps.apple.com/?q=$lat,$lng';
      url = "comgooglemaps://?saddr=&daddr=$lat,$lng&directionsmode=driving";
      if (await canLaunch(url)) {
        await launch(url);
      } else {
        throw 'Could not launch $url';
      }
    }

    if (await canLaunch(url)) {
      await launch(url);
    } else if (await canLaunch(urlAppleMaps)) {
      await launch(urlAppleMaps);
    } else {
      throw 'Could not launch $url';
    }
 }

Answer 2

You could try to use a Map Launcher plugin to launch apple/google maps depending on a platform

import 'dart:io';
import 'package:map_launcher/map_launcher.dart';

if (Platform.isIOS) {
  await MapLauncher.launchMap(
    mapType: MapType.apple,
    coords: Coords(31.233568, 121.505504),
    title: "Shanghai Tower",
    description: "Asia's tallest building",
  );
} else {
  await MapLauncher.launchMap(
    mapType: MapType.google,
    coords: Coords(31.233568, 121.505504),
    title: "Shanghai Tower",
    description: "Asia's tallest building",
  );
}

Answer 3

Just an idea but maybe you can try to use the url_launch plugin to launch a url following the schemata given in the apple maps url schemata given here: https://developer.apple.com/library/archive/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html#//apple_ref/doc/uid/TP40007899-CH5-SW1