How to Launching Google Maps and Apple Maps in Flutter

Hello Guys, how are you all? Hope you all are fine. In this tutorial, we are going to learn How to Launching Google Maps and Apple Maps in Flutter. So Without Wasting your time, Lets start this tutorial.

Method 1

1. Creating a new Flutter project

First, we need to create a new Flutter project and then we will add our plugin into the pubspec.yaml file.

$ flutter create flutter_url_launcher_app
$ cd flutter_url_launcher_app .

2. Adding the Plugin into Pubspec.yaml

Now open pubspec.yaml file and add the following plugin. Remember your version number can be different, currently the latest version of url_launcher is 5.2.5.

dependencies:
  flutter:
    sdk: flutter
 
  url_launcher: ^5.2.5

And after that run flutter packages get in the terminal. This command will install the url_launcher package and make it available to us for use.

3. Launching Google Maps and Apple Maps in Flutter

What if you want to open Google or Apple maps? Firstly, let’s define a lat and lng for wherever we want to open.

class HomePage extends StatelessWidget {
  final String lat = "47.3230";
  final String lng = "-142.0212";
  // ...
}

We can then create a new ListTile that takes advantage of this:

ListTile(
  title: Text("Open Maps"),
  onTap: () async {
    // Here we are supplying the variables that we've created above
    final String googleMapsUrl = "comgooglemaps://?center=$lat,$lng";
    final String appleMapsUrl = "https://maps.apple.com/?q=$lat,$lng";

    if (await canLaunch(googleMapsUrl)) {
      await launch(googleMapsUrl);
    }
    if (await canLaunch(appleMapsUrl)) {
      await launch(appleMapsUrl, forceSafariVC: false);
    } else {
      throw "Couldn't launch URL";
    }
  },
),

Method 2

you can install the packege url_launcher and use the code down below:

import 'package:url_launcher/url_launcher.dart';

class MapUtils {

  MapUtils._();

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

Now you can open google maps in your app just call this method:

MapUtils.openMap(-3.823216,-38.481700);

Method 3

1. Install url_launcher plugin
2. write a code like below.
3. that’s It.

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




const url ='https://www.google.com/maps/dir/?api=1&origin=43.7967876,-79.5331616&destination=43.5184049,-79.8473993&waypoints=43.1941283,-79.59179|43.7991083,-79.5339667|43.8387033,-79.3453417|43.836424,-79.3024487&travelmode=driving&dir_action=navigate';
_launchURL(url);

So it’s all About This tutorial. Hope this above tutorial helped you a lot. Comment below Your thoughts and your queries. And Also Comment on your suggestion here.

Also Read

• Waiting for another flutter command to release the startup lock
• Scaffold.of() called with a context that does not contain a Scaffold
• Flutter Error: RangeError (index): Invalid value: Not in range 0..2, inclusive: 3
• How to solve SocketException: Failed host lookup: ‘flutter-project-xxxxx.firebaseio.com’ (OS Error: No address associated with hostname, errno = 7)
• Flutter BottomNavigationBar not working with more than three items