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.
Related
I'm trying to create multiple Markers for google maps. I started out with a Set<Marker> markers = Set();, then made a loop over a List and added Markers to markers
Marker resultMarker = Marker(
markerId: MarkerId(currentLocation.id),
infoWindow: InfoWindow(title: "${currentLocation.title}", snippet: "$snippet"),
position: LatLng(currentLocation.coordinates[1], currentLocation.coordinates[0]),
);
markers.add(resultMarker);
I then tried returning a widget of:
GoogleMap(
initialCameraPosition: CameraPosition(target: _cameraPosition, zoom: 11.0),
onMapCreated: (controller) => mapController = controller,
myLocationButtonEnabled: false,
markers: markers,
);
But I only get the first marker and not all of them. How can I get all markers?
This one worked for me:
List<Marker> markers = <Marker>[];
and inside your loop:
markers.add(
Marker(
markerId: MarkerId(currentLocation.id),
infoWindow: InfoWindow(title: "${currentLocation.title}", snippet: "$snippet"),
position: LatLng(currentLocation.coordinates[1], currentLocation.coordinates[0]),
)
);
make sure that markers data are correct since google map does not show markers with invalid LatLng ( try to test with dummy data)
and then
GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(38.9647,35.2233),
zoom: 9.0,
),
mapType: MapType.normal,
markers: Set<Marker>.of(_markers),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
)
I'm using google_maps_flutter: ^0.5.24+1 plugin. I can't drag the marker inside map even though draggable property is set true. Whats wrong here? My code :
return GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(placemark.position.latitude,
placemark.position.longitude),
zoom: 18,
),
markers: Set<Marker>.of(
<Marker> [
Marker(
markerId: MarkerId("home"),
position: LatLng(placemark.position.latitude, placemark.position.longitude),
icon: BitmapDescriptor.defaultMarker,
infoWindow: InfoWindow(
title: placemark.name
),
draggable: true,
),
]
),
onMapCreated: (mapController) {
googleMapController = mapController;
},
);
You need to long press the Marker to trigger the drag event. To debug, you can use the onDrag() property to see if the drag event has been started.
I am working on google map. I need to implement a custom info window...Look like this,
https://github.com/gsanthosh91/Google-Map-Floating-Info-Window-Uber/blob/master/screenshot.png
But I didn't find any tutorial designing like this custom info windows.
I think you can use this
body: GoogleMap(
markers: _markers,
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 20.0,
),
),
And infoWindow in Marker class from google_maps_flutter.dart
Marker(
markerId: markerId,
position: _center,
infoWindow: InfoWindow(
title: 'MyLocation',
snippet: 'Here is an Info Window Text on a Google Map',
),
),
};
Also try adding a custom widget.
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,
),
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);
}))