Google map ground overlay flutter

Question

I would like to display an image in overlay at given lat-log positions on Google map using Flutter. I am using flutter package google_maps_flutter: 0.5.32, at present the package does not provide to implement the feature .

Answer 1

I was able to figure out a solution to this. I've implemented it in Android at this point, but not for IOS yet.

It was actually fairly simple once I figured it out. But there was a little ground work that needed to occur first.

First, I created a methodChannel for my app. In that method channel, I passed an XML string that contains one or more groundOverlays. This includes the basics of GPS coordinates, file location of my JPG.

Second, I created a class called MapOverlays which is a static class and contains a list of a class called MapOverlay. This is just a way for me to actually do multiple overlays at once.

Do this from Android Studio, where you open the Android folder in the Flutter project. You should know how to do this if you've created a methodChannel and especially run it for debugging.

These classes were created in:

google_maps_flutter/java/io.flutter.plugins.googlemaps

Once I've done this, I can receive the XML string via the method channel, and pass that to the constructor for MapOverlays which parses the XML code and creates an array of MapOverlay items.

Once this groundwork is completed, displaying the overlay on the Google Map when it's created is trivial.

I have to copy/paste the following code into the GoogleMapController.java class. It goes at the very end of the method onMapReady().

SEE FINAL NOTE AT THE BOTTOM!

    ArrayList<MapOverlays.MapOverlay> mapOverlays =  MapOverlays.getMapOverlays();
    
        for (MapOverlays.MapOverlay mo: mapOverlays) {
          if (mo.getVisible()) {
            LatLng southWest = new LatLng(mo.getSouth(), mo.getWest());
            LatLng northEast = new LatLng(mo.getNorth(), mo.getEast());
            LatLngBounds bounds = new LatLngBounds(southWest, northEast);
            Bitmap bitmap = BitmapFactory.decodeFile(mo.getImageLocation());
            GroundOverlayOptions mapOptions = new GroundOverlayOptions().image(BitmapDescriptorFactory.fromBitmap(bitmap));
            mapOptions.positionFromBounds(bounds);
            mapOptions.bearing(mo.getBearing()*-1);
            mapOptions.transparency(mo.getTransparency());
    
            GroundOverlay groundOverlay = this.googleMap.addGroundOverlay(mapOptions);
          }
      }

Final Note: I know this is kind of a hack. But I needed this feature and did not want to write my own Flutter Google Map. I looked at a leaflet (flutter_map plugin) that looked really promising and implementing an OverlayImage item that was trivial once I figured out that's the item that will work. However, flutter_map does not support the bearing/rotation. I have many groundOverlays I've created with Google Earth, and they all have some rotation applied. Without this, the maps did not line up on flutter_map and I couldn't figure out how to modify the code to take a rotation. So this was a show stopper.

I'm really surprised that flutter_google_maps doesn't support the ground overlays. It would be quite trivial to add this support in for Android. I'm hoping that iOS will be as well.

My final comment is that your are modifying Google code that is cached from the Flutter plugin. Anytime you upgrade flutter_google_maps (or clear by some other method), you will need to re-apply these changes.

But, for now, I'm able to have a workaround for a desperately needed feature.

I looked for a solution on and off for months. So perhaps this will also help someone else.