I am using google_maps_flutter to show the maps of user location, I come up with an idea where user can click anything in maps and show the the coordinates they clicked. What I mean with the coordinates here is Lat and Lng position that the click from the maps. Is that possible to do that ? and are there some articles as guide for me to do that ?
use onTap callback of GoogleMap widget like below to get coordinates from map where use clicks.
GoogleMap(
onTap: (LatLng latLng) {
final lat = latLng.latitude;
final long = latLng.longitude;
},
);
Related
enter image description hereI have created a 430-radius circle on Google Maps.
I want one functionality when I click outside of the circle radius then the message shows you are out of the zone.
If I clicked within the circle then I want to show the message you are in your zone.
I have created a 430-radius circle on Google Maps and I compared the latitude and longitude of my current location.
In OnTap I have shown on e Toast message you are in your zone.
The problem is when I press out of the circle the message shows you are in your zone.
Same when I clicked within the circle same message showed.
I have used the if-else statement but I can't achieve the functionality which I want.
final List _list = [
Marker(
markerId: MarkerId('1'),
position: LatLng(25.00057631014206, 55.297173890099394),
draggable: false, onDragEnd: (updatedLatLng) {
// checkUp(updatedLatLng);
}),
//position: LatLng(latSelected, lngSelected),
];
Set circles = Set.from([
Circle(
circleId: CircleId('1'),
center: LatLng(25.00057631014206, 55.297173890099394),
radius: 700,
strokeWidth: 2,
// strokeColor: Color(0xFFB2DEFF),
fillColor: Color(0xFFE4F0F9).withOpacity(0.5))
]);
There is a method onTap(LatLng) on google maps it will give you lattitude and longitude coords from parameters.
You can check from there whether the current coords are inside the circle or not.
How to configure google_maps_flutter in Flutter in oder to keep the marker in the center of the map while user will drag the map and get new position with new latitude and longitude, e.g. Uber
Put your GoogleMap inside Stack then put your cursor widget in the Center on the top of your GoogleMap as follow:
Stack(
children: [
GoogleMap(),
Center(child: CursorrWidget()),
],
);
To calculate your cursor latitude and longitude call this function when notifying onCameraIdle:
GoogleMap(
onCameraIdle: () {
LatLngBounds bounds = mapController.getVisibleRegion();
final lon = (bounds.northeast.longitude + bounds.southwest.longitude) / 2;
final lat = (bounds.northeast.latitude + bounds.southwest.latitude) / 2;
}
)
Objective:
To be able to show custom markers from dev only and disable google maps' default markers.
Description:
I am trying to put markers in GoogleMap from google_maps_flutter plugin but Google already has its own markers so it is getting in the way of the markers that I am trying to add. Is there any way to just show the map and add user-defined markers only? If not is it possible to minimize the number of markers shown by default map?
Just looked around and found some possible fix.
Seems like we can generate map style from this website:
Styling Wizard.
From there I toned down landmarks and then I was able to remove markers using this:
final String mapStyle =
await rootBundle.loadString('assets/map/map_style.txt');
//Set it on mapcontroller after map is created.
onMapCreated: (GoogleMapController controller) {
if (_controller.isCompleted) {
return;
}
controller.setMapStyle(mapStyle);
_controller.complete(controller);
},
// create a function to create custom marker
Future<BitmapDescriptor> createCustomMarkerBitmap() async {
Uint8List? data = await getBytesFromAsset("assets/icons/map_marker.png", 100);
return BitmapDescriptor.fromBytes(data!);
}
// then call the function to create a custom marker.
BitmapDescriptor? _marker = await createCustomMarkerBitmap();
final Marker marker = Marker(
markerId: _markerId,
position: _position,
icon: _marker, // use the marker
infoWindow: _infoWindow,
onTap: () {},
);
Hi i would like to ask how can I retrieve the data from the Firestore and send it to a double.
This is the code where I retrieve the data from Firestore.
Firestore.instance
.collection('locations')
.snapshots()
.listen((driverLocation){
driverLocation.documents.forEach((dLocation){
dLocation.data['Latitude'] = latitude;
dLocation.data['Longitude'] = longitude;
print(latitude);
});
});
I store it inside the dLocation and when i print(dLocation.data) it will display the latitude and longitude in the Firestore. But when i pass it to the double latitude and double longitude it returns null.
busStop.add(
Marker(
markerId: MarkerId('driverLocation')
,
draggable: false,
icon: BitmapDescriptor.defaultMarker,
onTap: () {
},
position: LatLng(latitude, longitude),
));
Then i would like to pass the data that is in the double latitude and double longitude into the marker so that the marker will move accordingly to the latitude and longitude in the Firestore.
Everything that is happening here is in a initState().
**If theres anything you would want to ask please feel free to do so as i do not have any idea on how to convey my question. Thank you so much in advance.
You're doing it in the wrong way. Right now you are assigning the value of latitude (which is null) to the value of dLocation.data['latitude']. What you want to do is this:
latitude = dLocation.data['latitude'];
longitude = dLocation.data['longitude'];
with this change, the value of dLocation.data['latitude'] will be assigned to latitude and the value of dLocation.data['longitude'] will be assigned to longitude variable
Update:
To get new markers and show them on the screen with latitude and longitude values, you can do something like this:
#override
void initState(){
Firestore.instance
.collection('locations')
.snapshots()
.listen((driverLocation){
//busStop = []; removes all the old markers and you don't get duplicate markers with different coordinates
driverLocation.documents.forEach((dLocation){
dLocation.data['Latitude'] = latitude;
dLocation.data['Longitude'] = longitude;
busStop.add(
Marker(
markerId: MarkerId('driverLocation')
,
draggable: false,
icon: BitmapDescriptor.defaultMarker,
onTap: () {
},
position: LatLng(latitude, longitude),
)); //you need to check for duplicate markers here. you can do it by giving each marker an unique id and check for the same marker in the list so you don't get duplicate markers.
});
setState((){}); //rebuilds the widget tree after adding the markers to the busStop list
});
}
What's happening here is you add the markers to the busStop list and after adding all the markers, you call setState and the widget tree rebuilds the screen with the latest data. You might need to check for duplicate markers because they might be re-added to the busStop list. Or you can simply remove all the old markers and add the new ones by using busStop = []; before adding to busStop
I am using flutter. I want to get the clicked marker id when a marker is clicked on Google Maps. Or I would like to know if I clicked a marker or a map area. How can I do it?
First, you will create some variables,
one that will be the value of the markerId: MarkerId(markerValue1):
String markerValue1 = 'Your Marker Id';
one that will store the latest markerId value:
String latestMarkerValue;
Then you will add in your Marker widget theonTap: method:
onTap: (){
latestMarkerValue=markerValue1;
}
You will do this for every marker.
If you want to have all the clicked markers' ides then you will change the value of the latestMarkerValue
latestMarkerValue= latestMarkerValue==null?latestMarkerValue= 'markerValue1':latestMarkerValue='$latestMarkerValue $markerValuen'