Flutter URL Launcher Google Maps - dart

Question

List.dart
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
class List extends StatefulWidget {
#override
ListState createState() {
return new ListState();
}
}
class ListState extends State<List> {
static const double lat = 2.813812, long = 101.503413;
static const String map_api= "API_KEY";
#override
Widget build(BuildContext context) {
//method to launch maps
void launchMap() async{
const url = "https://maps.google.com/maps/search/?api=$map_api&query=$lat,$long";
if (await canLaunch(url)) {
print("Can launch");
void initState(){
super.initState();
canLaunch( "https://maps.google.com/maps/search/?api=$map_api&query=$lat,$long");
}
await launch(url);
} else {
print("Could not launch");
throw 'Could not launch Maps';
}
}
//method to bring out dialog
void makeDialog(){
showDialog(
context: context,
builder: (_) => new SimpleDialog(
contentPadding: EdgeInsets.only(left: 30.0, top: 30.0),
children: <Widget>[
new Text("Address: ",
style: TextStyle(
fontWeight: FontWeight.bold
),
),
new ButtonBar(
children: <Widget>[
new IconButton(
icon: Icon(Icons.close),
onPressed: (){
Navigator.pop(context);
}
)
],
)
],
)
);
}
return new Scaffold(
body: new ListView.builder(
itemBuilder: (context, index) => ExpansionTile(
title: new Text("State ${index+1}"),
children: <Widget>[
new ListTile(
title: new Text("Place 1"),
trailing: new Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new IconButton(
icon: Icon(Icons.info),
onPressed: makeDialog
),
new IconButton(
icon: Icon(Icons.directions),
onPressed: launchMap
)
],
),
),
new Divider(height: 10.0),
new ListTile(
title: new Text("Place 2"),
trailing: new Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new IconButton(
icon: Icon(Icons.info),
onPressed: makeDialog
),
new IconButton(
icon: Icon(Icons.directions),
onPressed: launchMap
)
],
),
)
],
),
itemCount: 5,
),
);
}
}
My project currently involves launching Google Maps from the URL launcher library. But the problem I am currently having is Google Maps will open but it does not open to the latitude and longitude that I have set as the variable.
How do i set the URL for it to launch according to the coordinates? Or is there a better alternative?
Please assist.

Answer 1

You need to pass api=1 for url_launcher, you have to pass the encoded url Uri.encodeFull().
find more details in this sample project.
launchURL() async {
static const String homeLat = "37.3230";
static const String homeLng = "-122.0312";
static final String googleMapslocationUrl = "https://www.google.com/maps/search/?api=1&query=${TextStrings.homeLat},${TextStrings.homeLng}";
final String encodedURl = Uri.encodeFull(googleMapslocationUrl);
if (await canLaunch(encodedURl)) {
await launch(encodedURl);
} else {
print('Could not launch $encodedURl');
throw 'Could not launch $encodedURl';
}
}

Answer 2

You can use a Map Launcher plugin
if (await MapLauncher.isMapAvailable(MapType.google)) {
await MapLauncher.launchMap(
mapType: MapType.google,
coords: Coords(31.233568, 121.505504),
title: "Shanghai Tower",
description: "Asia's tallest building",
);
}

Answer 3

try this method
///
/// for launching map with specific [latitude] and [longitude]
static Future<void> openMap({
required double latitude,
required double longitude,
required String label,
}) async {
final query = '$latitude,$longitude($label)';
final uri = Uri(scheme: 'geo', host: '0,0', queryParameters: {'q': query});
await launch(uri.toString());
}

Answer 4

For launching Google Maps, the format[1] for a simple search should be as followed:
https://www.google.com/maps/search/?api=1&query=ADDRESS_OR_LATLNG_HERE
In your case, instead of having the value of 1 for the api parameter, you are inserting "API_KEY", which is incorrect. The value should always be 1, so this can be hard-coded.
[1] https://developers.google.com/maps/documentation/urls/guide#forming-the-url