I am trying to implement a google_maps in flutter where I can zoom-in and zoom-out by pinching like official google maps. I cannot find any method for implementing the same.
My code snippet is -
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(
target: _center,
zoom: -3.0
),
scrollGesturesEnabled: true,
zoomGesturesEnabled: true,
myLocationButtonEnabled: false,
gestureRecognizers: Set()
..add( Factory<PanGestureRecognizer>(() => PanGestureRecognizer())),
markers: markers
);
Thanks in advance.
The problem is that the zoom level is negative however the min zoom level is 0.
The above answer is also correct but if your map is wrapped in the SingleChildScrollView() widget then the zoom feature will not work fine.
I Just upgrade the flutter SDK,
And now its working.
Related
I'm trying to create a simple flutter map widget that gets layers from a WMS server.
The server is this.
And you can see the its capabilities here.
Specifically, I want to use the layer "AMS_1956-1957".
As this layer is served in the CRS EPSG:4258, I'm creating a custom CRS for this FlutterMap to use (as it's stated in the documentation that only WGS84 (EPSG:4326) and Google Mercator (EPSG:3857) projections are supported).
I'm creating this custom CRS following the instructions here.
I'm getting the Proj4 definition string for this CRS (EPSG:4258) from here, as stated in the documentation: "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs"
So the code for creating the custom CRS is this:
var resolutions = <double>[32768, 16384, 8192, 4096, 2048, 1024, 512, 256, 128];
var maxZoom = (resolutions.length - 1).toDouble();
var epsg4258CRS = Proj4Crs.fromFactory(
code: 'EPSG:4258',
proj4Projection: proj4.Projection.add("EPSG:4258",
'+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs'),
resolutions: resolutions,
);
Then I'm using this CRS in my FlutterMap widget as follows (again, based in the documentation).
#override
Widget build(BuildContext context) {
return FlutterMap(
options: MapOptions(
center: LatLng(41.61, -2.52),
zoom: 3.0,
),
layers: [
TileLayerOptions(
wmsOptions: WMSTileLayerOptions(
baseUrl: 'https://www.ign.es/wms/pnoa-historico?',
layers: ['AMS_1956-1957'],
crs: epsg4258CRS,
),
),
MarkerLayerOptions(
markers: [
Marker(
width: 5.0,
height: 5.0,
point: LatLng(41.61, -2.52),
builder: (ctx) => Container(
child: const FlutterLogo(),
),
),
],
),
],
);
}
}
The pointer is shown, so I guess it's doing something, but no map image is shown, and it returns the following error:
ImageCodecException: Failed to decode image data. Image source:
https://www.ign.es/wms/pnoa-historico?&service=WMS&request=GetMap&layers=AMS_1956-1957&styles=&format=image%2Fpng&srs=EPSG%3A4258&version=1.1.1&transparent=true&width=256&height=256&bbox=180,-90,180,-90
Ok, the WMS is working, as I can access it via QGIS, for example.
If I open the "image source" url created by flutter via browser it doesn't seem to work.
Plus, the bbox values in the url doesn't seem to make much sense, as they lie outside of the CRS boundaries. And the centering and zoom values I'm giving it doesn't seem to make any effect either...
If I try to open the url with different bbox values closer to the boundaries of the layer it shows something at least:
https://www.ign.es/wms/pnoa-historico?&service=WMS&request=GetMap&layers=AMS_1956-1957&styles=&format=image%2Fpng&srs=EPSG%3A4258&version=1.1.1&transparent=true&width=256&height=256&bbox=-9.5,2.5,12,44
Although I don't really fully understand what these numbers refer to (max x, min x, max y, min y?? // top-left corner, bottom-right corner // etc. ??)
Any help on what might be happening here will be much appreciated, thank you!
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'm attempting to add opacity to the GoogleMap widget but not seeing any changes.
I've previously tried wrapping the entire widget with a Container then adding Opacity and GoogleMap as direct children but this did not work either.
The code below builds correctly, but adds no opacity:
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
Opacity(
opacity: 0.5,
child: GoogleMap(
onMapCreated: _onMapCreated,
myLocationButtonEnabled: false,
initialCameraPosition: CameraPosition(
target: _center,
zoom: 15.0,
),
indoorViewEnabled: false,
mapType: MapType.normal,
markers: _markers
)
),
...
]
)
)
);
}
I would expect the map to be opaque. Is this possible with GoogleMaps plugin or do they prevent styling like this?
The google_maps_flutter plugin renders a native GMSMapView on iOS and a native MapView on Android, so the alpha setting need to be implemented by the plugin itself to be able to access it.
Unfortunately you can't use Flutter's Opacity widget in the way you have attempted when rendering native components, since that widget only works on elements that are drawn on the canvas by Flutter itself.
So if you really want to achieve this, you'll have to implement this in Android and iOS yourself. In that case you can use the google_maps_flutter plugin as a reference.
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));
.............
});
Hello friends i trying to set Google Map as a background of the web page like this
. I m noticing in this site that the map which is used by this site has no arrows and plus minus icons on it. i don't know how to get this kind of code of Google Map. I trying to do the same but there on google map page no option to delete these features
Please help me
any help would be appreciated
Thanks in advance
there's the demo code to do the map that you want. visit here you will have to change the parameters such as center and zoom level. then you can achieve the map as you have shown in the question. for documentation plz refer this
There are certain options for the map that you can disable when initializing your map. You can find a list of these map options in Google Maps API Reference: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
To get just a bare map, you'll probably have to do something like this for your map options:
var myOptions = {
zoom: (specify zoom level),
center: (your map's center),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: false,
draggable: false,
overviewMapControl: false,
panControl: false,
scrollwheel: false,
streetViewControl: false,
zoomControl: false,
mapTypeControl: false
}