There is a button in the bottom right of the google maps API google maps widget. I never added this button myself. How do I remove it?
edit:
here is my code
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("TravelBuddy"),
),
body: Stack(
children: <Widget>[
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition:
CameraPosition(
target: _center,
zoom: 11.0,
),
mapType: _currentMapType,
markers: _markers,
onCameraMove: _onCameraMove,
),
Padding(
padding: EdgeInsets.all(16.0),
child: Align(
alignment: Alignment.topRight,
child: Column(
children: <Widget>[
button(_onMapTypeButtonPressed, Icons.map),
SizedBox(height: 16.0),
button(_onAddMarkerButtonPressed, Icons.add_location),
SizedBox(height: 16.0),
button(_goToPosition1, Icons.location_searching),
],),),),],),);}
Thanks for the code.
Try putting an option "my LocationButtonEnabled" in GoogleMap() widget
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition:
CameraPosition(
target: _center,
zoom: 11.0,
),
mapType: _currentMapType,
markers: _markers,
onCameraMove: _onCameraMove,
myLocationButtonEnabled: false,
options: GoogleMapOptions(
myLocationEnabled:true
//there is a lot more options you can add here
)
),
I had a similar problem. Adding 'zoomControlsEnabled: false,' in the GoogleMap() widget worked for me.
Related
I need help with the Flexible widget.
Widget build(BuildContext context) {
return Padding(
padding : EdgeInsets.all(20),
child: RawMaterialButton(
onPressed: onPressed,
elevation: 4.0,
fillColor: Theme.of(context).primaryColor,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: PreferredSize(
preferredSize: Size.fromHeight(30.0),
child: AppBar(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
automaticallyImplyLeading: false,
centerTitle: true,
title: Text(title),
)
),
body: Column(
children: [
Flexible(
child: Image.network(
link,
fit:BoxFit.fill
),
),
Padding(
padding: EdgeInsets.fromLTRB(0,10,0,10),
child: Divider(),
),
Text(
type,
overflow: TextOverflow.fade,
style: TextStyle(
wordSpacing: 1.0,
fontStyle: FontStyle.italic
),
),
Text(
"Prezzo: "+price.toString()+"€",
overflow: TextOverflow.ellipsis,
),
],
),
),
),
);
}
the method works because the image follows the size of the window, but if I make it too small the image disappears and gives me this error.
I have made several attempts but have not found a solution to the problem.
EDIT:
basically my panel looks like this but if I try to make it too small it gives me this error.
I would like to limit the size of the map to a part of the drawer and to show the current location marked on the map. This way it stays on the whole drawer and only shows the location when I press the location symbol...
Widget _buildDrawer(BuildContext context) {
return Drawer(
child: Flex(
direction: Axis.horizontal,
children: [
Expanded(
child:GoogleMap(
mapType: MapType.normal,
myLocationEnabled: true,
initialCameraPosition: _currentPosition,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
))]));
}
...
currentPosition = CameraPosition(
bearing: 192.8334901395799,
target: LatLng(latitude, longitude),
tilt: 59.440717697143555,
zoom: 19.151926040649414);
Tried too: but is in full again
Drawer(
child: Container(
height: MediaQuery.of(context).size.height * 0.10,
width: MediaQuery.of(context).size.width * 0.10,
child: Row(
children: <Widget>[
Expanded(
flex: 70,
child: GoogleMap(
mapType: MapType.hybrid,
mapToolbarEnabled: false,
zoomControlsEnabled: false,
myLocationEnabled: true,
initialCameraPosition: _currentPosition,
onMapCreated: (GoogleMapController controller) async {
_controller.complete(controller);
},
),
)])))
child: Column(children: [GoogleMap()])
this way you can store multiple widgets within the draw without having the map take up the entire widget.
You have to options as far as styling the GoogleMap() widget
You can change the style within the google map widget
2)You can style the parent widget which holds the GooggleMap()
for column this would be => Column(mainaxisalignmen: mainaxisalignment.center etc.
column is not the only widget you have to use, any widget that takes children is a good choice for being the child of the drawer
I succed for get data from firestore with this code:
return new Scaffold(
body: Column(
children: <Widget>[
StreamBuilder(
stream: Firestore.instance.collection("location").snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Text("Loading Data.. Please Wait");
return
Container(
child: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng("${snapshot.data.documents[0]['latitude']}", "${snapshot.data.documents[0]['longitude']}"),
zoom: 12.0
),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
);
},
),
],
),
);
but I not really uderstand how to put value in LatLng(error in here), that is error.
anybody have the idea for that problem, appreciate for your help.
From the google_maps documentation, I can see you have to pass 2 double values to LatLng constructor.
Try the code below:
return new Scaffold(
body: Column(
children: <Widget>[
StreamBuilder(
stream: Firestore.instance.collection("location").snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData)
return Text("Loading Data.. Please Wait");
return
Container(
child: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: CameraPosition(
target: LatLng(double.parse("${snapshot.data.documents[0]['latitude']}"), double.parse("${snapshot.data.documents[0]['longitude']}")),
zoom: 12.0
),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
),
);
},
),
],
),
);
The difference is that I used double.parse() to convert your data to double and then I pass it to the LatLng constructor.
On some devices, the maps display fine. However, some times, when I scroll to the very bottom and scroll up slowly, the map overlap App Bar instead of start disappearing from my view (as the other widgets).
I've tested it in more than 4 different devices and simulators, and nothing happens. However it does happen on my friend's smartphone, I don't know why. Have anyone ever saw this bug? [screenshot of the bug][1]
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width,
child: GoogleMap(
onMapCreated: (mapController) {
_mapController = mapController;
try {
_addMarker();
} catch (e) {
print(e.toString());
_scaffoldKey.currentState.showSnackBar(
buildSnackBar('Request location error'));
}
},
markers: _markers,
mapType: MapType.normal,
scrollGesturesEnabled: false,
initialCameraPosition: CameraPosition(target: LatLng(_lead.latitude, _lead.longitude)),
)),
Column(
children: <Widget>[
Table(
columnWidths: {0: FlexColumnWidth(1), 1: FlexColumnWidth(1)},
children: [
_buildTableRow('Installation Address:',
_lead.installationAddressLineOne,
color: COLOR_LIGHT_GREY.withAlpha(150))
],
),
addDivider(),
Text(
'Roof Location',
style:
TextStyle(fontWeight: FontWeight.w600, color: Colors.red),
),
],
),
],
),
Container(
child: ButtonTheme(
height: 32,
minWidth: double.infinity,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
buttonColor: Colors.indigo,
padding: EdgeInsets.only(left: 10, right: 10),
child: RaisedButton(
child: Text(
'Route to lead',
style: TextStyle(color: Colors.white),
),
onPressed: () {
final url =
'https://www.google.com/maps/dir/?api=1&destination=${_lead.latitude},${_lead.longitude}';
launch(url);
},
),
),
)
],
);
[1]: https://i.stack.imgur.com/lAmL9.png
I have a SliverAppBar that I want to be hidden when the user scrolls down on the page. The problem is that I have a Google Map widget that is causing the app bar to move as well, when I only want it to move only when my touch is off the Google Map. Is there a way to prevent this?
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.transparent,
elevation: 5.0,
pinned: false,
snap: false,
floating: false,
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset(
'assets/events/city.jpeg',
fit: BoxFit.cover,
),
),
),
SliverFillRemaining(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: 200,
width: double.infinity,
child: GoogleMap(
initialCameraPosition:
CameraPosition(target: LatLng(50.0, 50.0)),
onMapCreated: (controller) {
setState(() {
_googleMapController = controller;
});
},
),
),
)
],
),
),
)
],
),
));
}
I found that adding a gestureRecognizer property to GoogleMap and passing in a Factory of type VerticalDragRecognizer allowed it to prevent the SliverAppBar from scrolling. It also works on any kind of scrolling you want for your app. See this for more info about it around the 50 minute mark.
SliverFillRemaining(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Container(
height: 200,
width: double.infinity,
child: GoogleMap(
gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer()
)),
scrollGesturesEngabled: true,
initialCameraPosition:
CameraPosition(target: LatLng(50.0, 50.0)),
onMapCreated: (controller) {
setState(() {
_googleMapController = controller;
});
},
),
),
)
],
),
),
)