CODEWITHSUNDEEP
iosdartfluttermapkit
Daniel Henry Thomas
Daniel Henry Thomas

Reputation: 350

How to open Apple Maps using Flutter/Dart?

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

Upvotes: 12

Views: 15802

Answers (4)

BaDo
BaDo

Reputation: 578

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';
    }
 }

Upvotes: 15

Alex Moran
Alex Moran

Reputation: 389

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",
  );
}

Upvotes: 8

Daniel Henry Thomas
Daniel Henry Thomas

Reputation: 350

A simple solution I have found is to replace the google maps URL with a maps.apple.com equivalent, using the same url_launcher function.

For example, the original function for Google Maps:

void _mapaBethania() async {
    const url = "https://www.google.com/maps/place/Panamanian+Institute+for+Special+Training/@9.0067418,-79.5300556,17z/data=!3m1!4b1!4m5!3m4!1s0x8faca84549395297:0x9c54b1fdb96ac590!8m2!3d9.0067365!4d-79.5278669";
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Lo sentimos, no es posible abrir: $url';
    }
  }

Has become:

void _mapaBethania() async {
  const url = "https://maps.apple.com/?q=IPHE&ll=9.0067418,-79.5300556&z=16";
    if (await canLaunch(url)) {
      await launch(url);
    } else {
      throw 'Lo sentimos, no es posible abrir: $url';
    }
  }

Nevertheless, although this change does fulfill Apple's enforced obligation to use their own software instead of the competition's, the user experience with Apple Maps is very poor, because once the Map App is shown, it becomes a bit confusing and difficult to return back to the original App.

Therefore, I am planning to write code that enables both options, Apple Maps in order to comply with Apple enforcement, and also Google Maps in order to provide a better user experience, despite Apple.

Anyway, the latter is just a personal opinion; the true fact is that replacing the URL for a maps.apple.com equivalent using the same launch_url function, does seem acceptable to comply with Apple requirements.

Upvotes: 0

ehhc
ehhc

Reputation: 647

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

Upvotes: 3

Related Questions