Question 394809 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    For web, you should provide your google key in the web/index.html. It should be inside of the head tag.

    Documentation – https://developers.google.com/maps/flutter-package/config#web

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search