How To Integrate Customized Google Map in Flutter

Let’s develop a customised Google Maps for the best user experience.

Published in

Flutter Community

7 min readSep 1, 2021

COVID-19 has changed the way we work and live. Globally many enterprises have brought changes in the way of doing business. Talking about the Flutter app development, developers strive to meet ever-changing challenges. They add new features based on advancing technologies.

In this pandemic situation there are no of orders on home deliveries increasing day by day so due to that apps need to have a map feature to deliver orders to specific locations with the help of the current location from Google Maps. So nowadays almost all apps have integrated maps. So I thought that let's write one blog on this feature as well, which contain some customisation in google map.

Let’s note down customisation features:

Google Map Integration related configuration.
Custom Style For Google Map
Fetch Current location with permission
Fetch Nearest Pharmacy Centres based on current location
Custom Markers an accurate position.
Custom Info window with an accurate anchor.
Cluster-Based Google Map Customisation.

Google Map Integration Related Configuration :

First of all, we need to get Google API Key from Google Cloud Console.

Create one project and name as per your choice.

Enable Google Map SDK for Android & iOS Platforms in Google Developers Console.

You will get Google Map API Key through Credential Page. Select your project and then click on Create Credentials button and choose the API key.

Android Configuration :

Specify your API key in the application manifest AndroidManifest.xml

Your API KEY : Paste your API key from console

Set the minSdkVersion above 20 in android/app/build.gradle.

iOS Configuration :

Specify your API key in the application delegate AppDelegate.swift

Your API KEY : Paste your API key from console

All plugins which we are going to use to achieve our goal are as below.

Custom Style For Google Map :

Now we need to integrate GoogleMap widget to our scaffold with basic properties. If you want a Google Maps with customised style then get your style JSON from Mapstyle . Please add that JSON text into one file named as map_style.txt , define it in pubspec.yaml file.

Now we need to get string format from JSON file using routeBundle.So we can assign this to a style of Google Maps.

Fetch Current Location :

Let’s Integrate the location & permission_handler plugin to implement the current location & permission related features.

You will find serviceEnabledMethod in location_manager.dartfile which has code to update the current location.

_getLocationUpdates method gives you continuous updates about location changes so you can get nearby pharmacy stores at any current location.

getLocation method to get current location.

Fetch Nearest Pharmacy Centres Based On Current Location :

Now I am going to fetch nearby pharmacy centres using Google Places API. So for that, you need to enable Places API from Google cloud console.

You must enable Billing on the Google Cloud Project from here to get places from Google Places API.

Now we need to implement API integration to fetch all pharmacy centres nearby your current location.

Google Places API for nearbysearch :
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=$value&rankby=distance&type=pharmacy&key=$googleApiKey

Your API KEY : Paste your API key from console
PharmacyDetailsModel : Model to get details for info window

Custom Markers With Accurate Position :

We have to implement some methods to customise our markers.

Don’t forget to call _initialiseMarkerBitmap method ininitstate method before any calls.

Now, let's set the position of our customised marker with their actual LatLng positions.

I have set the colour of markers based on their distance from the current location so the nearest markers have an orange colour and others have dark blue. So for that, I have used calculateDistance method to calculate the distance between marker position & current location.

MarkerId needs to be unique for all markers.

Now hope, you have a query regarding why I have used newLatLngBounds it here. Zoom in or zoom out will be working by default based on newLatLngBounds method as it will set zoom ratio by default as per all markers and displaying them as per best convenience into the visible region.

Source

Custom Info Window With Accurate Anchor :

As we want to implement custom UI for info window so first of all need to create a Ui/Ux of info window as below image :

This Ui contains below features :

Pharmacy store placeholder
Green / Red shadow around placeholder to indicate it's open or not.
Triangle shape at the bottom using canvas.
Respective details of pharmacy store.

So let's go straight into the coding part to implement this type of info window.

PharmacyRatingWidget : Ui for average rating of pharmacy store
TriangleAnchorShape : Canvas based triangle drawing

Below is code for a canvas-based anchor which has a triangle shape.

Path : To achieve shape as per requirement
Canvas : To draw developed shape in UI

Now the most important part is to attach the info window with a marker at the time of user taps on marker. So we need to implement one provider file which contains the code that we want to produce.

All variables are used to set the accurate position of info window on the marker which renders in proper manner respective of map scrolling/zoom-in or zoom-out moment.

So let’s do this and complete our part for the info window feature.

Just update width and height to a provider at the initial time as below.

Now its time to integrate info window Ui in build method and its position related code.

Just wrap the whole Ui with the Consumer widget of InfoWindowProvider and Stack to achieve our goal for the info window.

We have used Positioned widget in Stack to show info window with calculation using the provider and achieve our best UX for info window as same as below video.

Custom marker & info window without cluster

Source

Cluster-Based Google Map Customization:

Now we are going to implement a cluster that gives us enhancement towards a better user experience.

Let’s implement a cluster marker which we want to show for cluster points. As per requirement, you can add other parameters as well.

onMarkerTap : Tap event of cluster points
icon : Icon’s Ui for cluster points

_getClusterMarkers : To get shape/ui of markers with count of markers in specific region.
getClusterMarkers : Give us list of cluster points & markers which are connected.

Now we just need to change some implementation at the time of marker generation as below.

Using initClusterManagers method we can start our implementation for a cluster, it initialises cluster generation, after initialising cluster manager we need to pass it to getClusterMarkers method with other required details, which give us cluster-based markers for our pharmacy centres. It works as same as before but comes with cluster points for multiple markers.

You can see the above-mentioned feature as shown in the below image.

Let’s see the summary of implementation in the below video.

Conclusion

We have done all the customisation on google map using the Google Map APIs. If you want to do a production release then you have to generate a new API key for release mode. So after that, you can go ahead with production.

So, that’s it for How To Integrate Customized Google Map in Flutter.

You can find the whole project with clean architecture on Git Repository :