Shows a places picker dialog in ios and android, returning the data in the places picker to the app.
Google Maps Android API
Google Maps SDK for iOS
Credentials
, choose Create Credential
.
More detailed instructions for iOS can be found here: https://developers.google.com/maps/documentation/ios-sdk/get-api-key
The way you register your API key on iOS vs Android is different. Make sure to read the next sections carefully.
Set the NSLocationWhenInUseUsageDescription in ios/Runner/Info.plist
. Example:
<key>NSLocationWhenInUseUsageDescription</key>
<string>Using location to display on a map</string>
Note: If your iOS and Android API key are different, be sure to use your iOS API key here.
Add code to show the MapView.
//Create an instance variable for the mapView
var _place = await FlutterPlacesDialog.getPlacesDialog();
Using the wrong key. If you made a separate key for iOS and Android, make sure you are using the iOS key in the MapView.setApiKey() call.
You will be making multiple edits to your AndroidManifest.xml
file. In your Flutter project, you can
find this file location under android/app/src/main
In your AndroidManifest.xml
, add the following uses-permission above the
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
In your AndroidManifest.xml, add the following lines inside of the application
tag. Be sure to replace your_api_key
with the one you generated.
<meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="your_api_key"/>
<meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/>
In your android/build.gradle
file. Under buildScript
dependencies
add:
classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:1.1.2-4'
Run your application on an Android device or simulator. Confirm that when you display the map you see map detail. If you only see a beige screen it's possible that your API key is incorrect.
PlaceDetails place = await FlutterPlacesDialog.getPlacesDialog();
Verify you have your google api key setup correctly. If using iOS you need to set this via the API call, on android you need to setup the google-services.json correctly in your app deployment or it will not correctly show the screen, dropping out basically immediately. You should get an error back from the api call to the client saying it dropped.