Flutter and Google Maps…

Mapping the road ahead…


All in one Flutter Resource: https://flatteredwithflutter.com/google-maps-in-flutter/

Flutter and Google Maps…
Flutter 1.0 features..

There was everything special in the Flutter event (this year)..Choosing one out of them, I decided to explore Google Maps…

Asked by developers, delivered by Flutter….

Things needed…

  1. Add google_maps_flutter in the pubspec.yaml
  2. Get an API key at https://cloud.google.com/maps-platform/.
  3. For Android : Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml
Android Manifest.xml

For iOS : Specify your API key in the application delegate ios/Runner/AppDelegate.m:

iOS AppDelegate.m

Important lines :

#import “GoogleMaps/GoogleMaps.h”

[GMSServices provideAPIKey:@”YOUR KEY HERE”]

3. Add import ‘package:google_maps_flutter/google_maps_flutter.dart’; in your main.dart

All geared up….
Flutter and Google Maps…

How to start…

Start with initializing the GoogleMap (a widget)

GoogleMap widget…

onMapCreated : Callback which takes GoogleMapController…initialized as

GoogleMapController mapController;

options : An optional widget, can be used for customizing the Google Maps UI configurations..Takes in GoogleMapOptions, some properties such as

Google Map Options…

scrollGesturesEnabled : if the map should respond to scroll gestures, tiltGesturesEnabled : if the map should respond to tilt gestures,

rotateGesturesEnabled : if the map should respond to tilt gestures,

myLocationEnabled : if a “My Location” layer should be shown on the map,

This layer includes a location indicator at the current device location, as well as a My Location button. Enabling this feature requires adding location permissions to both native platforms of your app.

compassEnabled : if the map should show a compass when rotated,

mapType :type of map tiles to be rendered,

zoomGesturesEnabled : if the map view should respond to zoom gestures,

cameraPosition : used to indicate initial camera position and to update that position programmatically along with other changes to the map user interface,

Satellite View…

Changing to the different map types is achieved by mapController’s updateMapOptions and setting to MapType.satellite

MapType.satellite…
Current Location..

Using mapController’s cameraPosition we can extract the current location.

mapPosition.target.latitude. || mapPosition.target.longitude
Flutter and Google Maps…

Using mapController’s addMarker, passing the position to be marked.

Marking Places…

infoWindowText : Contents to be displayed in the marked location,

icon : description of the bitmap used to draw the marker icon

That’s all folks!!!!!

For complete source code, visit :


The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.