I am trying to show a Stack widget containing a Google Map on the bottom and an icon (car) on top, in a way that the car should be following the path on the road given by different GPS coordinate positions (lat, lon).
To simulate that, the car icon is always drawn in the center of the Stack and the Google Map is moved under the icon using:
_mapController.animateCamera(CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(
newPosition.target.latitude,
newPosition.target.longitude,
),
zoom: 19,
),
));
here is the drawing of the map + the icon:
Widget drawStack() {
return Container(
width: 930,
height: 524,
child: Stack(
children: <Widget>[
_buildGoogleMaps(),
Align(
alignment: Alignment.center,
child: Image.asset("assets/images/carIconMap.png", width: 50, height: 93),
),
],
),
),
],
));
}
Everything works fine at the beginning but as more coordinate points are given, there is a moment (part outside of the Container), when the map seems to not be loaded when the camera is moving.
I have tried to give the map the maximum and minimum lat,lon bounds via the property cameraTargetBounds of the GoogleMap constructor.
But nothing seems to be working.
this worked to me
CameraPosition _initialPosition = CameraPosition(target: _latlng, zoom: 16);
Position currentLocation;
_getLocation() async {
currentLocation = await Geolocator()
.getCurrentPosition(desiredAccuracy: LocationAccuracy.best);
var newPosition = CameraPosition(
target: LatLng(currentLocation.latitude, currentLocation.longitude),
zoom: 16);
CameraUpdate update =CameraUpdate.newCameraPosition(newPosition);
CameraUpdate zoom = CameraUpdate.zoomTo(16);
_mapController.moveCamera(update);
}
and this is my widget
GoogleMap(
onMapCreated: onMapCreated,
initialCameraPosition: _initialPosition,
myLocationEnabled: true,
myLocationButtonEnabled: false,
),
Related
i'm doing (OLA, UBER) like app in flutter.i wanna show route from source and destination and to set initial camera position by covering two lat-long.
GoogleMap(
onMapCreated: _onMapCreated,
mapType: MapType.normal,
compassEnabled: true,
myLocationEnabled: true,
initialCameraPosition: CameraPosition(target:
LatLng(0.0, 0.0)), // <---- instead of single
// latlong, i wanna show both source and
// destination
markers: _createMarker(),
polylines: Set<Polyline>.of(polyLines.values),
),
await mapController
.animateCamera(CameraUpdate.newLatLngBounds(
LatLngBounds(southwest: LatLongONE, northeast: LatLongTWO), 35))
those two southwest, northeast will be given by this
enter link description here
google Api
mapController.addMarker(
MarkerOptions(
position: LatLng(37.4219999, -122.0862462),
),
);
I've seen this code snippet in a blog post, and I'm trying to add markers to Google Maps.
The method 'addMarker' isn't defined for the class 'GoogleMapController'.
I think the library has changed and I want to know what's the new way doing this, I've looked up in the controller.dart and api reference but couldn't figure it out.
I would be happy to see some tutorials and blog posts about it, don't hesitate to share.
Yes, The google maps API has changed and the Marker API is widget based and not based in controller anymore.
By CHANGELOG.md
"Breaking change. Changed the Marker API to be widget based, it was controller based. Also changed the example app to account for the same."
I copy some pieces of code from github app example that I think is important to you
Map<MarkerId, Marker> markers = <MarkerId, Marker>{}; // CLASS MEMBER, MAP OF MARKS
void _add() {
var markerIdVal = MyWayToGenerateId();
final MarkerId markerId = MarkerId(markerIdVal);
// creating a new MARKER
final Marker marker = Marker(
markerId: markerId,
position: LatLng(
center.latitude + sin(_markerIdCounter * pi / 6.0) / 20.0,
center.longitude + cos(_markerIdCounter * pi / 6.0) / 20.0,
),
infoWindow: InfoWindow(title: markerIdVal, snippet: '*'),
onTap: () {
_onMarkerTapped(markerId);
},
);
setState(() {
// adding a new marker to map
markers[markerId] = marker;
});
}
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: const CameraPosition(
target: LatLng(-33.852, 151.211),
zoom: 11.0,
),
// TODO(iskakaushik): Remove this when collection literals makes it to stable.
// https://github.com/flutter/flutter/issues/28312
// ignore: prefer_collection_literals
markers: Set<Marker>.of(markers.values), // YOUR MARKS IN MAP
)
I advise you take a look in example app here. There is updated to new API.
I did below example from google codelabs.
Map<MarkerId, Marker> markers = <MarkerId, Marker>{};
LatLng _center = LatLng(9.669111, 80.014007);
onMap created add single static marker
void _onMapCreated(GoogleMapController controller) {
mapController = controller;
final marker = Marker(
markerId: MarkerId('place_name'),
position: LatLng(9.669111, 80.014007),
// icon: BitmapDescriptor.,
infoWindow: InfoWindow(
title: 'title',
snippet: 'address',
),
);
setState(() {
markers[MarkerId('place_name')] = marker;
});
}
google map widget:
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 14.0,
),
markers: markers.values.toSet(),
),
In Flutter I have a map that take the device position with help of location. Then i use this position to show marker in Google map with help of Google Maps Flutter plugin.
The code is similar to
child: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: CameraPosition(
target: LatLng(lat, lng),
zoom: 5,
),
markers: Set<Marker>.of(
<Marker>[
Marker(
draggable: true,
markerId: MarkerId("1"),
position: LatLng(lat, lng),
icon: BitmapDescriptor.defaultMarker,
infoWindow: const InfoWindow(
title: 'Usted está aquí',
),
)
],
),
onMapCreated: (GoogleMapController controller) {
mapController = controller;
},
))
If location plugin fails or take wrong data i need to have the option to reposition this marker. I use draggable: true to drag marker, but i need to take the new latitude and longitude for save it in database.
So the question is: Using the draggable how can i get the new latitude and longitude?
If you allow me, I would suggest a different approach to this problem. I think in the current version of google maps for Flutter (0.4.0) you don't have a method to get the new position after dragging the marker, so my solution was to use the camera position to move the marker around and then use the current camera position to get the new coordinates.
So in your code, you could do something like this:
child: GoogleMap(
mapType: MapType.hybrid,
initialCameraPosition: CameraPosition(
target: LatLng(lat, lng),
zoom: 5,
),
markers: Set<Marker>.of(
<Marker>[
Marker(
draggable: true,
markerId: MarkerId("1"),
position: LatLng(lat, lng),
icon: BitmapDescriptor.defaultMarker,
infoWindow: const InfoWindow(
title: 'Usted está aquí',
),
)
],
),
onCameraMove: ((_position) => _updatePosition(_position)),
onMapCreated: (GoogleMapController controller) {
mapController = controller;
},
))
Then you can set your marker's new state each time the user moves the camera around and use this coordinates for any other purpose you need:
void _updatePosition(CameraPosition _position) {
Position newMarkerPosition = Position(
latitude: _position.target.latitude,
longitude: _position.target.longitude);
Marker marker = markers["1"];
setState(() {
markers["1"] = marker.copyWith(
positionParam: LatLng(newMarkerPosition.latitude, newMarkerPosition.longitude));
});
}
I hope it helps!
Marker have onDragEnd property. using onDragEnd property give new latitude and longitude.
Marker(
onTap: () {
print('Tapped');
},
draggable: true,
markerId: MarkerId('Marker'),
position: LatLng(value.latitude, value.longitude),
onDragEnd: ((newPosition) {
print(newPosition.latitude);
print(newPosition.longitude);
}))
I want to bring a modal bottom sheet upon clicking a google map marker and display some dynamic data using flutter
You can program the onTap event of the marker to show a modal bottom sheet:
final Marker marker = Marker(
markerId: markerId,
position: LatLng(lat, lon),
onTap: () {
controller.animateCamera(CameraUpdate.newCameraPosition(
new CameraPosition(
target: LatLng(lat, lon), zoom: 18)));
showModalBottomSheet(
context: context,
builder: (builder) {
return Container(
child: _buildBottonNavigationMethod(your_data),
);
});
},
);
And here you build your widget as you want:
Column _buildBottonNavigationMethod(your_data) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.ac_unit),
title: Text('Add as favourite'),
)
],
);
}
I am working on flutter project.On which I have to draw one circle on my current location on google map.Does any one have idea.
I want like this in flutter
Thanks in advance.
This functionality is now available in the google_maps_flutter package:
https://pub.dev/documentation/google_maps_flutter_platform_interface/latest/google_maps_flutter_platform_interface/Circle-class.html
Partial example:
Set<Circle> circles = Set.from([Circle(
circleId: CircleId(id),
center: LatLng(latitude, longitude),
radius: 4000,
)]);
GoogleMap(
mapType: MapType.normal,
myLocationEnabled: true,
myLocationButtonEnabled: true,
initialCameraPosition: initialMapLocation,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
onCameraMove: null,
circles: circles,
);
If you use flutter_map plugin, then you can draw radius circle easily. Here is the code.
FlutterMap(
options: MapOptions(
center: LatLng(latitude, longitude),
zoom: 16.0
),
layers: [
TileLayerOptions(
urlTemplate: "map url",
additionalOptions: {
"accessToken" : "xxx",
"id" : "map id"
}
),
MarkerLayerOptions(
markers: Marker( //marker
width: 25.0,
height: 25.0,
point: LatLng(latitude, longitude),
builder: (context) {
return Container(
child: IconButton(
icon: Icon(Icons.my_location),
iconSize: 25.0,
color: Color(0xff9045f7),
onPressed: () {
print('marker tapped');
},
),
);
}
)
),
CircleLayerOptions(
circles: CircleMarker( //radius marker
point: LatLng(latitude, longitude),
color: Colors.blue.withOpacity(0.3),
borderStrokeWidth: 3.0,
borderColor: Colors.blue,
radius: 100 //radius
)
)
],
),)
You could use google_maps_flutter plugin, here is the code:
circles: Set.from([Circle( circleId: CircleId('currentCircle'),
center: LatLng(position.latitude,position.longitude),
radius: 4000,
fillColor: Colors.blue.shade100.withOpacity(0.5),
strokeColor: Colors.blue.shade100.withOpacity(0.1),
),],),
One way to do this is by changing the icon of the Marker
mapController.addMarker(MarkerOptions(
position: LatLng(37.4219999, -122.0862462),
icon: BitmapDescriptor.fromAsset('images/circle.png',),
),
);
After setting appropriate permission on android/ios, set trackCameraPosition: true and myLocationEnabled: true on google maps options, after that you can add your image in current location by following code
mapController.addMarker(MarkerOptions(
position: mapController.cameraPosition.target,
icon: BitmapDescriptor.fromAsset('images/circle.png',),
),
);
Here is an excellent article which explains all possible things you can do with Google Maps for Flutter (Developers Preview) plugin article
There is an opended pull request with this feature at https://github.com/flutter/plugins/pull/1136
But Google team has not accepted it because there is a issue with license with whom made the commits. I don't know if this will be merged. There are a lot of pull request accepted, but not integrated.
Please keep in mind the google maps widget is a developer preview, at version 0.2. Many things and abilities will likely change over the coming months.