Show directions using google map flutter package? - flutter

I have an already saved map route as an encoded string in the database. I need to show
already saved route and the direction to the user in the google map using google_maps_flutter package. Even in the google map is okey. There are options to draw the markers and poly lines using the package, but no option to enable direction(like go 300m and then turn left).
here is the code sample I tried, without direction
GoogleMap(
initialCameraPosition: _initialPosition,
myLocationEnabled: true,
trafficEnabled: true,
markers: _markers,
polylines: _polyline,
cameraTargetBounds: _cameraTargetBounds,
)
using google map app we can do that(I'm using map_launcher package to do that like below), but only parsing origin and destination and it's the direction at that time, not the already planned and saved route.
mapLauncher.MapLauncher.showDirections(
mapType: mapLauncher.MapType.google,
origin: mapLauncher.Coords(origin!.latitude, origin.longitude),
originTitle: 'Your Locations',
destinationTitle: 'Destination Location',
destination: mapLauncher.Coords(destination!.latitude, destination.longitude))
does anyone knows a way to achieve this? is it not possible?

There is no FREE way to show directions using Google maps flutter package. You either use another map package or open google maps app (if you're not looking for a FREE way ignore and go all the way down).
FREE WAY
If you would like to open Google Maps app from your app you could do something like this.
First set up your url String (what you will send to Google maps app so it knows what directions give):
String url = 'https://www.google.com/maps/dir/?api=1&origin=' +
currentLocation.latitude.toString() +
',' +
currentLocation.longitude.toString() +
' &destination=' +
lat.toString() +
',' +
lon.toString() +
'&travelmode=driving&dir_action=navigate';
_launchURL(url);
Where currentLocation means the user current location, and lat and lon means the destination.
Then just launch that url, using an urlLauncher:
void _launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
PAID WAY
If you are super decided to get directions into your app, you can use Directions API.

Related

Adding markers to Mapbox with additional features

I am developing a flutter application in which I am using Mapbox to add turn-by-turn navigation. I have been looking at some tutorials to add markers to the map. However, I also want to give the user awareness of these specific points through voice output.
Is it possible to achieve this objective? Any resources or advice that you could provide, please?
Edit: How can I integrate the text to speech with the custom mapbox on my flutter app? For the Mapbox, we simply run the following code to enable voice instructions.
voiceInstructionsEnabled: true,
So how can I add the text conversion with it?
Truly appreciate any help
You can do it separately.
You can show markers on map with Mapbox
and prepare a string with all marker labels and use flutter_tts package to convert to speech as follows:
Future _speak() async {
await flutterTts.setVolume(volume);
await flutterTts.setSpeechRate(rate);
await flutterTts.setPitch(pitch);
if (_newVoiceText != null) {
if (_newVoiceText!.isNotEmpty) {
await flutterTts.speak(_newVoiceText!);
}
}
}
This snippet is taken from the example given in documentation:
https://pub.dev/packages/flutter_tts/example

How to implement fly-to current location of mapbox in flutter

I have a floating action button on the map. When I click on this button, irrespective of my exploring on the map it should fly-to my current location.
I am able to show my current location on the map, and I have created a floating action button on the map to track back to my current location. I have stored the current location on my shared prefs. Now, I am looking for a Mapbox Fly-To feature to move back my current location.
Here is my pubspec.yaml file
Here is my code:
This is my Mapbox Map Screen.
I was also facing the same issue but fixed with the help of Geolocator flutter package which give you the current location details. Based on this details you can animate the map view to the position you have passed.
Please find the example below
onPressed: () async {
var position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
mapController.animateCamera(
CameraUpdate.newLatLng(
LatLng(
position.latitude,
position.longitude,
),
),
);
},

flutter google_maps can't zoom out any further

As the picture below, I've been searching everywhere about this issue but still cant find any solution.
About my code, i use the very default sample from google_maps_flutter, but it still doesnt let me zoom out any further from my default latitude/longitude.
(It is not about my internet connection, it remains the same)
GoogleMap(
initialCameraPosition: _kGooglePlex,
// circles: _circles,
markers: {
Marker(
markerId: MarkerId("123"),
icon: BitmapDescriptor.defaultMarker,
infoWindow: InfoWindow(title: "Carin"),
position: LatLng(-6.915601, 107.591446),
)
},
onMapCreated: (GoogleMapController controller) {
_controller = controller;
//_controller!.setMapStyle(MapStyle().dark);
},
)
I've been trying to clean, clean cache, restart the emulator, but the problem still there. And the main problem is, the map container shows blank/black screen on real device.
When i opened the page which contains google maps, the console gives me exceeded sample count in FrameTime everytime i interact with the map, such as move or zoom in/out.
I really appreciate of any of your comments that trying to help, cuz i dont usually ask question if im not feeling totally stucked from everywhere, thank you so much.

How can I open read-only webpage on Flutter App

Can you show me the right way to solve my problem?
I want to run a webpage in the application and disable the screen response to user actions. (read only)
I run the page using the code:
String _url = 'https://google.com
await launch(
_url,
enableJavaScript: true,
forceWebView: true,
forceSafariVC: true,
)
But I can't cope with making this page insensitive to user actions (buttons, zooming, etc.). I've tried:
Enable "launch" in ignoring or absorbing. Did not work.
I tried to run a URL as a background and then put an inactive transparent button on it. I failed to.
I have no idea how to bite it.
use webview_flutter instead it gives you more control over the web screen

Open Google Maps from Flutter with place selected

I am trying to open Google Maps with a place selected. Can the below url be used with dynamic data? The one that I am using selects the first place I searched for on Google Maps. What else do I need to change or is this the right way to open Google Maps from Flutter?
I am using Url Launcher:
import 'package:url_launcher/url_launcher.dart';
Code:
name = Uri.encodeComponent(name);
name = name.replaceAll('%20', '+');
String googleUrl =
'https://www.google.com/maps/place/$name/#$latitude,$longitude,3z/data=!4m8!1m2!2m1!1s$name!3m4!1s0x89c259ae9485299b:0x8b3fcf671f63ac6b!8m2!3d$latitude!4d$longitude';
print(googleUrl);
if (await canLaunch(googleUrl)) {
await launch(googleUrl);
} else {
throw 'Could not open the map.';
}
I noticed that each place has a place_id. Can that be used to target specific place?
--- Solution thanks to comment below ---
https://developers.google.com/maps/documentation/urls/get-started
I suggest reading this doc for Google Maps. You can define the center area with a lat/long and the place's name on the URL. This should center the place on the configured coordinates. The URL that you can use should be similar to:
comgooglemaps://?q=$name&center=$lat,$long