Add Custom Widgets to Google Maps in Flutter with decorated_google_maps_flutter

Mehmet Oguz Derin
1 min readMar 13, 2020

--

URL to the package: https://pub.dev/packages/decorated_google_maps_flutter

翻譯: https://medium.com/@mehmetoguzderin/%E7%94%A8flutter%E6%9C%89google-maps%E5%8A%A0custom-widgets-cfcd5242faa5

Ever wanted to add markers, charts, visualizations, and other custom widgets on some location to your Google Maps integration in Flutter? Now, you can do it all in the build function with `decorated_google_maps_flutter`! Thanks Burak Cbdn for testing this.

`decorated_google_maps_flutter` has two parts that make it possible to display widgets that are attached to a location: `Locationed` and `DecoratedGoogleMap` widgets.

`Locationed` is similar to `Positioned` that you are used to as a Flutter developer, the difference is that instead of specifying a screen coordinate, you give a `LatLng` which contains world coordinate.

`DecoratedGoogleMap` is a wrapper around `GoogleMap` that handles all the necessary tasks to place the widgets at the specified locations on the map.

When you include `decorated_google_maps_flutter` in your Flutter project and Dart files, you automatically also include `google_maps_flutter` since the library exports it.

Right now, `decorated_google_maps_flutter` has a baseline that can get you going quickly. But in the future, it can have more customization options and much better performance on both small and large widget counts. Please provide feedback and help make it better for all!

The code for a complete example that combines `charts_flutter` and `decorated_google_maps_flutter` is below:

--

--