How to fit polylines to street curves in google maps flutter?
I did being playing with Polylines in google_maps_flutter for 2 months and I have this doubts:
Polylines do not follow the street curves or the highways.
Polylines has the OnTap callback but, on multi-polylines I can not get any ID or attribute to distinguis who I tapped.
can any one give me a hand with this?
I am new in Flutter and I am using the Directions API from Google. Maybe is not the right API to solve this problem.
I need that polyline set follow the street curves.
Polylines in google_maps_flutter
P.S: Sorry if my code bleed your eyes!
google_maps_flutter widget:
GoogleMap(
onMapCreated: (controller) {
_mapController = controller;
},
initialCameraPosition: CameraPosition(
target: getCurrentLocation(),
zoom: 15,
),
mapType: _currentMapType,
myLocationEnabled: true,
myLocationButtonEnabled: false,
compassEnabled: true,
rotateGesturesEnabled: true,
markers: _markers,
polylines: _polyline,
)
Set state to show the polyline and markers:
setState(
() {
_markers.clear();
for (var point in itinerary) {
_markers.add(
Marker(
markerId: MarkerId("stop ${point.latitude}"),
position: LatLng(point.latitude, point.longitude),
infoWindow: InfoWindow(title: point.address),
),
);
}
_polyline.clear();
_polyline.add(
flutter.Polyline(
polylineId: PolylineId("route"),
points: ccc,
width: 8,
color: Colors.red,
geodesic: true,
jointType: JointType.round,
),
);
_mapController.animateCamera(
CameraUpdate.newLatLngZoom(
LatLng(origin.lat, origin.lng), 13.0),
);
},
);
Google Directions API Call:
GoogleMapsDirections(apiKey: apiKey).directions(origin, destination, waypoints: itinerary, ).then((DirectionsResponse response) { return response }
I got some advice from Github member that told me to try SnapToRoad, now I get more details about the route, but the highways are still helicopter's travel
A simple GET to https://roads.googleapis.com/v1/snapToRoads whit the API_KEy and some points of my previus polyline helps.
Here is the link of SnapToRoad
That's because the polyline it's just a line that you draw, to do what you want need to make a route between points and using that generated coordinates make a polyline.
Check this tutorial that i found: https://www.developerlibs.com/2018/08/flutter-how-can-draw-route-on-google.html
try this pub: google_map_polyline
Related
I am using Stream Builder that sends api request after some seconds and fetch coordinates (lat, lng).
I want to update the map location (camera position & marker) on newly fetch coordinates.
But Camera position is updating and not focusing on new coordinates.
My google map widget is inside of stream builder and in which we are passing data through snapshot
e.g latlng = LatLng(snapshot.data['lat'],snapshot.data['lng']) to markers: SetMarker( markers, markerID, latlng, ), & initialCameraPosition: CameraPosition( target: latlng, zoom: 9.0, )
The GoogleMaps widget on Flutter does have the attribute initialCameraPosition but as the name says this is just an initial value, if you want to update the map once this has loaded i'd recommend the use of the callback onMapCreated, where you can use the controller to animate to a certain position.
Doing so would look something like this:
onMapCreated: (GoogleMapController controller) {
controller.animateCamera(
CameraUpdate.newCameraPosition(CameraPosition(
target: LatLng(snapshot.data['lat'],
snapshot.data['lng']),
zoom: 12)));
setState((){});
}
Hope this helps! ;)
Today I was playing with Google Maps by following this article, All is good until I find out dotted poly lines is missing.Can anyone help me to draw dotted lines when origin or destination is inside building.What I have now something similar to this
and this is actually what I want
THANKS IN ADVANCE.
Try to below code for poly line with dashed
GoogleMap(
initialCameraPosition: _kGooglePlex,
onMapCreated: _onMapCreated,
markers: markers,
polylines: {
Polyline(
polylineId: PolylineId('1'),
color: ThemeColors.primary,
width: 2,
patterns: [
PatternItem.dash(8),
PatternItem.gap(15),
],
points: const [
LatLng(37.42796133580664, -122.085749655962),
LatLng(36.42796133580664, -123.08575),
],
),
},
),
For more read this article
I think my issue is the same as here:
Flutter show marker's infoWindowText by default in Google map widget
However, there is no answer, except for a link to another post which isn't quite what I want to do.
When my map opens in my app, it shows the markers correctly, but I also want to have all the labels displaying by default on open...
As the shown by one of the markers here:
I'm creating markers like this:
for (Location location in _locations) {
final locationMarker = Marker(
markerId: MarkerId(location.id),
position: LatLng(location.geoY, location.geoX),
infoWindow: InfoWindow(
title: location.name,
),
onTap: () => _onTap(location),
icon: _mapMarkers.icon(location.slug),
draggable: false);
markers.add(locationMarker);
}
Then the map like this:
Widget _map(Set<Marker> markers) => GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(target: widget.mapCentre),
markers: markers,
...
onMapCreated: (controller) => _onMapCreated(controller, markers),
);
And the in _onMapCreated, I've tried to show all the labels, but only the last in the list of markers is actually displayed:
_onMapCreated(GoogleMapController controller, Set<Marker> markers) {
if (mounted) {
setState(() {
_controller.complete(controller);
controller.setMapStyle(_mapStyle);
for (var marker in markers) {
controller.showMarkerInfoWindow(marker.markerId);
}
});
...
I'm using:
[{
"featureType": "poi",
"stylers": [
{
"visibility": "off"
}
]
}]
to remove points of interest from the maps and I am hoping I can do something similar to get marker labels to display by default, but so far I've not found anything when searching google, or that there's another solution.
You can use showMarkerInfoWindow property the GoogleMapController
final GoogleMapController controller = await _controller.future;
controller.showMarkerInfoWindow(MarkerId('ID_MARKET'));
I found this library: https://pub.dev/packages/flutter_map_picker
I looked through his code and tried figuring out how he initiates drawing. What he accomplishes is far more complicated than I need, and I can't figure out the first step of what he did. I also don't want to take the guy's code. Can anyone explain how to accomplish this?
I just want to be able to circle objects on my map. There seems to be a polyline solution but it's just straight lines from a list of coordinates, not exactly what I'm looking for.
A Stack widget with GoogleMap and CustomPaint will let you draw anything you want on top of the map.
Stack(
children: <Widget>[
_position == null
? Text('Waiting for location . .')
: GoogleMap(
liteModeEnabled: false,
compassEnabled: true,
mapType: MapType.hybrid,
markers: Set<Marker>.of(markers.values),
initialCameraPosition: CameraPosition(
target: LatLng(_position.latitude, _position.longitude),
zoom: 17,
tilt: 0,
),
onMapCreated: (GoogleMapController controller) {
_mapController = controller;
// trigger initial update and paint of landmarks
_updateLandmarks();
},
onCameraMove: (CameraPosition position) {
_updateLandmarks();
},
),
CustomPaint(
foregroundPainter: MapPainter(_landmarksMap),
),
],
)
You have to convert map coordinates to device screen coordinates. Google has a cookbook on how to do that except it does not work in Flutter since the map plugin does not expose the complete API. But there is a way to do it of course.
void _updateLandmarks() async {
double dpi = MediaQuery.of(context).devicePixelRatio;
LatLngBounds bounds = await _mapController.getVisibleRegion();
ScreenCoordinate topRight = await _mapController.getScreenCoordinate(bounds.northeast);
ScreenCoordinate bottomLeft = await _mapController.getScreenCoordinate(bounds.southwest);
_landmarksMap.values.forEach((element) async {
ScreenCoordinate sc = await _mapController.getScreenCoordinate(LatLng(element.pos.latitude, element.pos.longitude));
element.screenPoint.x = ((sc.x - bottomLeft.x) / dpi).floor();
element.screenPoint.y = ((sc.y - topRight.y) / dpi).floor();
});
setState(() {});
}
You can read here for more details: https://aperico.com/google-maps-with-custom-paint-in-flutter/
I'm pretty new in Flutter. It is amazing. I'm working on small app usign google maps. I have 6 points (Markers) and need to recognize which one was selected.
I've added ontap event into every marker with i-index (i = 0..5). When I tap/click on marker I always get 6. It should be 0..5 based on marker.
Thanx a lot, Gabriel
i=0;
marker.clear();
for (myPoint mar in globals.historia.items) {
print(i.toString());
marker.add(Marker(
markerId: MarkerId(i.toString()),
position: mar.pos,
draggable: false,
consumeTapEvents: true,
onTap: () {
print("Marker_id-${i.toString()}");
},
));
i++;
}
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: myposition,
zoom: 17.0,
),
polylines: road,
markers: Set.of(marker),
)
When onTap() is triggered it calls i with its last value that's == 6, that's why every time you tap on a marker, the print method prints 6.
i is a global variable, that has its own address, so the print method will search for the value on that address every time onTap is called.
I propose this solution - replace youtr print method inside onTap with this : print("Marker_id-${globals.historia.items.indexOf(mar)}")
mar is a local variable inside the for in loop, and its value has never changed, so he will point on the same value, onTap will behave as you want.