I have added a google map to my flutter application,
But when I use a flutter_polyline_points to show the road nothing is gone to show
I haven see any tutorial to fix this problem but then I knew that to
Decode an encoded google polyline string e.g _piFps|U_ulLnnqC_mqNvxq`#
How to get the google polyline string to use in my app
that is my code
_addPolyLine() {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id, color: Colors.red, points: polylineCoordinates);
polylines[id] = polyline;
setState(() {});
}
_getPolyline() async {
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
googleAPiKey,
PointLatLng(36.3416751898107, 43.6087730170814),
PointLatLng(36.18702370508709, 43.979696040252136),
travelMode: TravelMode.driving,
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
}
_addPolyLine();
}
GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(_originLatitude, _originLongitude), zoom: 15),
myLocationEnabled: true,
tiltGesturesEnabled: true,
compassEnabled: true,
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
onMapCreated: _onMapCreated,
markers: Set<Marker>.of(markers.values),
polylines: Set<Polyline>.of(polylines.values),
),
Related
In Flutter, I created an array to add markers.
final List<Marker> _markers = <Marker>[];
Then I iterate all values and add them to this array
UserService().getAll().then((value) {
setState(() {
for (var element in value) {
_markers.add(Marker(
markerId: MarkerId(element.id.toString()),
position: LatLng((element.latitude), element.longitude),
infoWindow: InfoWindow(
title: element.name,
),
icon: BitmapDescriptor.defaultMarker,
));
}
});
}).catchError((e) {
debugPrint(e);
});
Finally on Google Maps i add this array to markers
final map = GoogleMap(
myLocationEnabled: true,
zoomControlsEnabled: false,
onMapCreated: _onMapCreated,
markers: _markers.map((e) => e).toSet(),
initialCameraPosition: CameraPosition(
target: _center,
zoom: 8.0,
),
);
The problem: Map only shows the first element of this array in the map. Does anybody know what´s wrong?
I have set up google_maps_flutter as in the code below with zoomControlsEnabled: true and mapToolbarEnabled: true.
I want to use the Map Toolbar for assisted point-to-point navigation with Google Maps. The Tool Bar Shows up on the map when I click a marker.
I can see both the Zoom Controls and the Map Tool Bar in the Android Emulator for the Flutter app but they are not there in the iOS Simulator.
Can someone please point out what I am missing here?
Thanks
GoogleMap(
padding: EdgeInsets.only(
bottom: _mapBottomPadding,
),
mapType: MapType.normal,
initialCameraPosition: _baseLocation,
myLocationButtonEnabled: true,
myLocationEnabled: true,
zoomControlsEnabled: true,
zoomGesturesEnabled: true,
mapToolbarEnabled: true,
// minMaxZoomPreference: const MinMaxZoomPreference(12, 14),
polylines: _polylineSet,
markers: _markersSet,
onMapCreated: (GoogleMapController controller) async {
if (!_controller.isCompleted) {
//first calling is false
//call "completer()"
_controller.complete(controller);
// setState(() {});
} else {
//other calling, later is true,
//don't call again completer()
}
// _controller.complete(controller);
_googleMapController = controller;
// Set Driver Current Position
locationData.getCurrentPosition().then(
(value) {
if (mounted)
setState(() {
_driverLatitude = value.latitude;
_driverLongitude = value.longitude;
});
},
).catchError(
(error) {
showLocationPermissionsAlert(
context,
error.toString(),
);
},
);
setMapBounds();
setState(() {});
},
),
I am using the google_maps_flutter package and the Zoom level for the myLocationButton, when pressed, is set to my last zoom level. I would like to reset the Zoom level when the myLocationButton is pressed.
This is the code for the Google Maps;
GoogleMap(
padding: EdgeInsets.only(bottom: _mapBottomPadding),
mapType: MapType.normal,
initialCameraPosition: _baseLocation,
myLocationButtonEnabled: true,
myLocationEnabled: true,
zoomControlsEnabled: true,
zoomGesturesEnabled: true,
// minMaxZoomPreference: const MinMaxZoomPreference(12, 14),
polylines: _polylineSet,
markers: _markersSet,
onMapCreated: (GoogleMapController controller) async {
if (!_controller.isCompleted) {
//first calling is false
//call "completer()"
_controller.complete(controller);
// setState(() {});
} else {
//other calling, later is true,
//don't call again completer()
}
// _controller.complete(controller);
_googleMapController = controller;
// Set Initial Camera Position
setCameraPosition(
position: locationData.getCurrentAddress.position
as Position);
setMapBounds();
setState(() {});
},
),
The zoom is stuck on the last zoom level when setting camera position previously and I would like to rest it when I click the myLocationButton.
The setMapBounds(); method call sets the zoom which depends on map bounds and calls the code below which can result in a high zoom level and the zoom level persists after the call, when I click the myLocationButton.
_googleMapController!
.animateCamera(CameraUpdate.newLatLngBounds(latLngBounds, 70));
How can I reset the zoom level after animating the camera?
Can you please try this one if it helps.try to setState zoomValue
double zoomValue=14.0;
LatLng mapCenter = new LatLng("your latitude", "your longitude");
initialCameraPosition: CameraPosition(
target: mapCenter,
zoom: zoomValue,
),
Try this
GoogleMap(
zoomGesturesEnabled: true,
tiltGesturesEnabled: false,
onCameraMove:(CameraPosition cameraPosition){
print(cameraPosition.zoom);
},
I was working with the integration of google maps in a flutter application. I have added multiple markers in the app. Also, I have added directions between two markers using flutter_polyline_points. The problem is how can I put a widget over the polyline points to show the distance or estimated time to travel which I have calculated using Distance metrics API.
Google maps
child: GoogleMap(
mapType: MapType.normal,
markers: Set<Marker>.of(markerData.values),
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 15.0,
),
// zoomControlsEnabled: false,
mapToolbarEnabled: true,
myLocationButtonEnabled: true,
myLocationEnabled: true,
polylines: Set<Polyline>.of(polylines.values),
),
Markers
void initMarkers(markerDetails, markerId) async {
final markerIdVal = markerId;
final MarkerId markerIdData = MarkerId(markerIdVal);
final Marker marker = Marker(
markerId: markerIdData,
position: LatLng(markerDetails["latitude"], markerDetails["longitude"]),
icon: await BitmapDescriptor.fromAssetImage(
ImageConfiguration(devicePixelRatio: 2.5),
'assets/images/marker.png'),
infoWindow:
InfoWindow(title: markerDetails["title"], snippet: distanceToLocation),
onTap: () {
_handleMarkerTap(
LatLng(markerDetails["latitude"], markerDetails["longitude"]));
});
setState(() {
markerData[markerIdData] = marker;
});
}
Polyline points
//Get polyline
void _getPolyline(latitude, longitude) async {
List<LatLng> polylineCoordinates = [];
PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
"MY_API_KEY",
PointLatLng(13.0323, 77.57),
PointLatLng(latitude, longitude),
travelMode: TravelMode.walking,
);
if (result.points.isNotEmpty) {
result.points.forEach((PointLatLng point) {
polylineCoordinates.add(LatLng(point.latitude, point.longitude));
});
} else {
print(result.errorMessage);
}
_addPolyLine(polylineCoordinates);
}
//Add polylines to the map
_addPolyLine(List<LatLng> polylineCoordinates) {
PolylineId id = PolylineId("poly");
Polyline polyline = Polyline(
polylineId: id,
color: Colors.deepOrange,
points: polylineCoordinates,
width: 3,
patterns: [PatternItem.dash(15), PatternItem.gap(10)],
);
polylines[id] = polyline;
}
I have a compass plugin that is giving direction angle, and also location plugin that provide the current location. With these plugins, I use google maps placed under Streambuilder to put my current location as marker and with a line to another location.
The issue I am facing currently is how to rotate the map automatically when the device is rotated, as the first plugin provides direction angle (double value) that gets updated streams as the device rotate.
I wanted to use this angle value to update Google Maps bearing automatically, so that the map rotates accordingly.
I have tired many ways but of no use. Google maps does not respond.
this is my code:
Completer<GoogleMapController> _controller = Completer();
return StreamBuilder(
stream: FlutterQiblah.qiblahStream,
builder: (_, AsyncSnapshot<QiblahDirection> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) return LoadingIndicator();
final qiblahDirection = snapshot.data;
_goToTheLake(qiblahDirection);
return GoogleMap(
mapType: MapType.satellite,
zoomGesturesEnabled: true,
compassEnabled: true,
myLocationEnabled: false,
myLocationButtonEnabled: true,
rotateGesturesEnabled: true,
initialCameraPosition: CameraPosition(
target: position,
zoom: 18,
// bearing: qiblahDirection.direction,
),
markers: Set<Marker>.of(
<Marker>[
widget.meccaMarker,
Marker(
draggable: true,
markerId: MarkerId('Marker'),
position: position,
icon: BitmapDescriptor.defaultMarker,
rotation: qiblahDirection.qiblah,
onTap: () {
_goToTheLake(qiblahDirection);
},
onDragEnd: (LatLng value) {
position = value;
_positionStream.sink.add(value);
},
zIndex: 5,
),
],
),
circles: Set<Circle>.of([
Circle(
circleId: CircleId("Circle"),
radius: 10,
center: position,
fillColor: Theme.of(context).primaryColorLight.withAlpha(100),
strokeWidth: 1,
strokeColor: Theme.of(context).primaryColorDark.withAlpha(100),
zIndex: 3,
)
]),
polylines: Set<Polyline>.of([
Polyline(
polylineId: PolylineId("Line"),
points: [position, QiblahMaps.LatLong],
color: Theme.of(context).primaryColor,
width: 5,
zIndex: 4,
)
]),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
);
},
)
I have placed this function as future called from inside stream builder in order to change the "bearing" of the map:
final GoogleMapController controller = await _controller.future;
controller.moveCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
bearing: qiblahDirection.direction,
),
),
);
} ```
Try this plugin flutter_compass
use the events to update google map bearing as you wish