Search code examples
flutter

How to add Google Maps API to Flutter Web

I am reading Chapter 11 of the Flutter Cookbook - Second Edition by Simone Alessandria. I follow the following steps:

  1. Create a new Flutter app, and call it map_recipe.

  2. flutter pub add google_maps_flutter

  3. I obtained Google Maps API key from here.

  4. Open the android/app/src/main/AndroidManifest.xml file in your project. Add the following line under the icon launcher icon, in the application node:

    android:icon="@mipmap/ic_launcher">

  5. Set the minSdkVersion in the android/app/build.gradle file:

    android { defaultConfig { minSdkVersion 20 } }

But how to do it for Web?

The full code can be found on the author's GitHub

Solution

  • The steps you have followed is for adding Google maps to the Android platform. To add Google Maps to your flutter web project, you would need to use the google_maps_flutter_web package and it since it is endorsed by the google_maps_flutter package, you just need to add your API key to the head your web/index.html file.

    Add this script to your head tag:

    <head>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>