I am using this Flutter map plugin. I have some markers on the map, and when I tap them another page should appear on top of the map, but instead I can only see it when I close the map.
I put the following code inside another method, in order to call it more conveniently from a Navigation Drawer:
mapView.show(new MapOptions(...))
when a marker is tapped i call this method:
showPage(
info = dbCall();
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new PageDemo(info, id)));
)
The things that puzzles me is that the context in MaterialPageRoute is the one of the NavigationDrawer, but I really don't know how to find another way to do it.
Related
I see a lot of tutorials for implementing bottom sheet in my flutter application, but i am facing problem in implementing that, all of them showing bottom sheet after onPressed/onTap and i do not want that. I had implemented google map in my application but now i want to show persistent bottom sheet after i got response from API on map screen and color of that bottom sheet must be transparent so that map can be visible through bottom sheet.
Can you share some code that how can i show bottomsheet without onpressed on google map screen in flutter mobile application?
you can use a stack widget and visibility widgets to show that.
here is some minimalist code
bool _isVisible=false;
//after you get a response fro your api you set state of `_isVisible` to `true/!_isVisible.`
Stack....
Positioned(bottom:10,left:0
child: Visibility(visible:!_isVisible,
child Container(color:Colors.Transparent,
child:Center(child:Text("your data here")))),
...
after getting your data :
return showModalBottomSheet(
isDismissible: false,
isScrollControlled: true,
context: context,
builder: (BuildContext context) => SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: ?,
),
),
);
I have a map app that I am building in Flutter and I want to add a campus map, which will be an overlay from a remote kml file eventually. In the first instances I just want to show something on the map, so I grabbed some co-ordinates form that kml file and added them to a List.
List<LatLng> building = [
LatLng(-2.2320211911239767, 53.475459515730925),
LatLng(-2.231763699058547, 53.47504046853617),
LatLng(-2.231605784002795, 53.47507219654),
LatLng(-2.2317965561189794, 53.47536812388608),
LatLng(-2.2317697340288305, 53.47537251389184),
LatLng(-2.231845506433501, 53.475498626591325),
];
I have a set of type markers and a set of type polyline
final Set<Marker> _residences = {};
final Set<Polyline> _campusOverlay = {};
I have this code in my _onMapCreated method
setState(() {
//Show Sample Building Marker
/* _residences.add(
Marker(
markerId: MarkerId('Building'),
position: _userLocation,
infoWindow: InfoWindow(
title: 'This is the title', snippet: 'This is a snippet'),
icon: BitmapDescriptor.defaultMarker,
),
);*/
_campusOverlay.add(
Polyline(
polylineId: PolylineId('Building'),
visible: true,
points: building,
width: 2,
color: Colors.red,
),
);
});
In my GoogleMap widget, I have added the markers and polylines properties.
GoogleMap(
onMapCreated: _onMapCreated,
polylines: _campusOverlay,
markers: _residences,
...
...
The marker(commented out atm) shows with no problems, but the polyline doesn't. I have seen a number of articles with this code, and I have no build errors, so I am confused as to why nothing is shown.
Am I missing something really obvious here?
[EDIT] -> Added screenshot. The co-ordinates were added to google maps (proper) and this is was is expected.
The issue wasn't with the code, but more the co-ordinates. I grabbed them from a remote KML file that I have access to. Below is an example.
-2.2346792602577352,53.46763821573774,0
I have restricted the map to my city and these co-ordinates are in the middle of the Indian ocean. These seem to be the correct way around.
53.46763821573774, -2.2346792602577352
What I can't understand is how the KML file shows the the overlay at the correct place at the moment. Not the final answer to my problem as I want to read this remote KML file and display the overlay, but for the time being, this is answered for what I wanted to do.
I have a map with a collection of markers on them. I need to be able to control the zIndex of the markers.
Without any zIndex code, the map works as expected, each marker is clickable (if it can be seen).
But after adding zIndex information the markers seem to gain a significant invisible wrapper and block access to nearby markers (see picture - it is now hard to click on one of the pink markers).
(I can also replicate this error with Google's example code for the plugin itself.)
Set<Marker> mkMarkers(List<Resto> restos) {
this.widget._zIndex = restos.length.toDouble();
return Set.from(
restos.asMap().map(
(int idx, Resto r) {
double hue = (r.qname == this.widget.viewModel.selectedResto)
? BitmapDescriptor.hueOrange
: 319.0;
return MapEntry(
idx,
Marker(
markerId: MarkerId(r.name),
position: LatLng(r.lat, r.lng),
onTap: () => this.widget.viewModel.onSelectResto(r.qname),
icon: BitmapDescriptor.defaultMarkerWithHue(hue),
// code below does not work as expected
zIndex: (r.qname == this.widget.viewModel.selectedResto)
? this.widget._zIndex
: idx.toDouble(),
));
},
).values,
);
}
In Android I was able to call Google Places screen to let user pick a location to save it, I want to do this with flutter.
I searched and found almost nothing implement that, and I understood that now this is the the most official library (still not implement what I want to do) https://pub.dartlang.org/packages/google_maps_flutter
and it's still not finished yet (Developers Preview)
GoogleMap(
onTap: _mapTapped,
compassEnabled: true,
onMapCreated: makeController,
initialCameraPosition: CameraPosition(
target: LatLng(40.712776,-74.005974),
zoom: 12.0,
),
)
_mapTapped(LatLng location) {
print(location);
// The result will be the location you've been selected
// something like this LatLng(12.12323,34.12312)
// you can do whatever you do with it
}
I am using this in my pubspec
map_view:
git:
url: git://github.com/Eimji/flutter_google_map_view
Then you can capture onclick events on the map
mapView.onMapTapped.listen((location) {
currentLatitude = location.latitude;
currentLongitude = location.longitude;
//Show only one marker
mapView.clearAnnotations();
mapView.setMarkers(
[Marker("1", "Location", currentLatitude, currentLongitude)]);
//Do whatever you want with the chosen location
mapView.setCameraPosition(
CameraPosition(Location(currentLatitude, currentLongitude), 18));
.............
});
can anyone please point me in the right direction about how to implement google maps in sencha touch 2.2.1 in an MVC fashion? a good step by step tutorial maybe?
I need to have a view and a controller but am not sure what is the correct way of doing it as regards defining map options and initializing the map. Been looking at various tutorials on the Internet but none of them matches exactly what I want to implement.
I am using a tab panel and my map needs to be displayed when clicking one of the tabs (called Location)...
first, you have to put the map panel as item of your tab container:
{
xtype: 'map',
useCurrentLocation: false,
mapOptions: {
disableDefaultUI: true,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
}
next, you can refer to it in the specific controller for this view in this way:
config: {
refs: {
...
mymap: '.map',
...
},
...
}
in that way you can have a reference of your map object in the controller by typing:
this.getMymap()
and can attach an handler to the map to make some action on it when it is rendered:
this.getMymap().on('maprender', this.onMapRender, this, { single: true });
where "onMapRender" is a method of your controller. You have to do in that way if you want, for example, render a marker over the map and center it, because before the "maprender" event dispatched by the map, you can not do any action over it (the GMap object simply does not yet exists), so, for example, in your controller, the handler could be:
onMapRender: function(e) {
var latLngCoordinates = new google.maps.LatLng(..., ...)
marker = new google.maps.Marker({
position: latLngCoordinates,
animation: google.maps.Animation.DROP,
map: this.getMymap().getMap()
});
this.getMymap().setMapCenter(latLngCoordinates);
}
enjoy with it ;)