Google Map Navigation in Flutter

Question

I'm new to flutter.

I found Flutter doesn't support inline map, only a static map view.

I wanted to build an app which I need to show the driving directions on the map.

Is it possible to create the same in flutter?

Siddur

Answer 1

you can use android_intent library in flutter for starting googlemaps and get diection in android.

library : https://pub.dartlang.org/packages/android_intent

and in ios you can use both google api like comgooglemaps or google map url {i choose this one} and maps.apple.com.

String origin="somestartLocationStringAddress or lat,long";  // lat,long like 123.34,68.56
String destination="someEndLocationStringAddress or lat,long";
if (new LocalPlatform().isAndroid) {
      final AndroidIntent intent = new AndroidIntent(
          action: 'action_view',
          data: Uri.encodeFull(
              "https://www.google.com/maps/dir/?api=1&origin=" +
                  origin + "&destination=" + destination + "&travelmode=driving&dir_action=navigate"),
          package: 'com.google.android.apps.maps');
      intent.launch();
    }
    else {
        String url = "https://www.google.com/maps/dir/?api=1&origin=" + origin + "&destination=" + destination + "&travelmode=driving&dir_action=navigate";
        if (await canLaunch(url)) {
              await launch(url);
       } else {
            throw 'Could not launch $url';
       }
    }

i hope it helps.

Sporozoite

OP asked he wants to build an app which shows direction, your answer just opens Google Maps app with navigation. – Pelias

This way opens a Webview in the app, we need to open Google Maps app instead – Maighdlin

Maybe not exactly what they asked, but the native view as far as I can tell won't navigate to a point so I will give you an upvote. Useful information – Footmark

thanks my friend :D , it was the just way which solved my problem :/ – Sporozoite

The package android intent is deprecated and replaced with android intent plus link – Malaya

Answer 2

At the time of writing this answer, the work on inline maps is still in progress. But since the guys at flutter have given others the ability to develop plugins, there are some alternatives.

You might want to check out :

https://medium.com/@matthew.smith_66715/maps-in-flutter-a1ac49ab554b

If you just want to get the location of your user:

https://pub.dartlang.org/packages/location

If you want to keep a watch out for new updates, I found some interesting discussions going on here:

https://github.com/flutter/flutter/issues/73

Praetor

I got everything from the links above except for one thing. Is it possible to show the fastest route also? – Siddur

@Siddur how did you get the route and make it colored like shown in picture? – Besom

That was just a screenshot for the question. – Siddur

@Siddur i tried with the String origin =currentLocation(from the location plugin), and String destination = "6.873941599999999,79.88108439999999", but didnt work. any idea why ? – Hardhack

FYI the Mapview plugin is discontinued – Queston

Answer 3

Bit late, but might be helpful to someone.

As far as i know, Google currently does not have exposed API or package for flutter, which would allow you to create this Navigation easily. Best approach would be to get Directions data from DirectionsAPI from Google. With this data you could create polyline and you would also have data for duration, steps, or distance. You would need to redraw your custom marker, based on current user location and act like navigation.

Simplier approach might be via MapBox and their Navigation SDK. Take a look at this package https://pub.dev/packages/flutter_mapbox_navigation and their official documentation https://docs.mapbox.com/android/navigation/guides/.

Nan

Answer 4

Use Dependency - url_launcher: ^6.1.4

static Future<void> openMap(double latitude, double longitude) async {
String iosUrl = 'https://maps.apple.com/?q=$latitude,$longitude';
if (GetPlatform.isAndroid) {
  String googleUrl ='https://www.google.com/maps/search/?api=1&query=$latitude,$longitude';
  if (await canLaunch(googleUrl)) {
    await launch(googleUrl);
  } else {
    throw 'Could not launch $googleUrl';
  }
}else{
  if (await canLaunch(iosUrl)) {
    await launch(iosUrl);
  } else {
    throw 'Could not open the map.';
  }
}

}

This above code is Working Fine and Running properly for android and IOS

For Ios put this Code in Info.plist

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

For Android put in manifiest.xml

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

 <queries>
    <package android:name="com.google.android.apps.maps" />
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:mimeType="text/plain" />
    </intent>
</queries>

Defazio

can you give me the better solution – Defazio

Answer 5

I was able to open google maps using only url_launcher (no other packages or native side changes)

Using the mode attribute you can choose how the URL should be handled, and using the externalApplication or externalNonBrowserApplication the device will open google maps

    Position currentPosition = await Geolocator.getCurrentPosition();
    String origin = '${currentPosition.latitude},${currentPosition.longitude}';
    String destination = '${currentPosition.latitude + 0.002},${currentPosition.longitude - 0.002}';

    final Uri _url = Uri.parse('https://www.google.com/maps/dir/?api=1&origin=$origin&destination=$destination&travelmode=driving&dir_action=navigate');

    await launchUrl(
        _url,
        mode: LaunchMode.externalApplication,
    );

Linctus