Flutter And Google Map For Beginners : Part 1 🧐
In this article I will share the basic for Google map in Flutter including : Places Autocomplete, Google map, Map Markers, Draw route on map, Customize map style and more…!
Add Google Map To Your Project
Check this plugin for latest plugin version. After you have added the dependency in the pubspec.yaml file, get an API key at https://cloud.google.com/maps-platform/
Note: Complete the android and iOS specific setup from here https://pub.dev/packages/google_maps_flutter#getting-started
Add Google Map Widget
After you have added the Google map library to your project, you can directly add google map to your flutter app as below.
Customized Looks Of Google Map 😍
You can change how the Google map look by using custom style JSON string. Check this website for some beautiful prebuild maps : https://snazzymaps.com/
Build Places Autocomplete For Google Map 🔥
Let's create a separate screen for place's autocomplete. We will add stream builder sink and title in the constructor to pass the data after the location is selected.
Let Add Google APIs ⚙️
Let create a utility for fetching the places result by calling the Google APIs. With the help of below class, we will get the search result by calling Google auto complete API. These class will all fetch the details of selected place by calling Google place details API.
Check place auto complete API documentation here : https://developers.google.com/maps/documentation/places/web-service/autocomplete
Check place details API documentation here : https://developers.google.com/maps/documentation/places/web-service/details
✔ Use Places Auto Complete Screen️
Now we will use the above created places auto complete screen from home screen. Below is the full code of home screen using the stream builder to get the selected address by user.
Voilà! Now we have implemented google map and places autocomplete. When user click on pickup address field in home screen, we will open places autocomplete screen. When user select any address, then it is passed to the stream builder sink and UI is updated on the home screen.
In the next part of the article I will explain how to implement custom marker on Google map, draw route, map animation etc. Stay tuned for the next part of the article😇
Thank you, and I hope this article helped you in some way. If you like the post, please support the article by sharing it. Have a nice day!
I am a freelancer who can help you make your idea up and running ✅. My expertise is in flutter and Android development, with 5 years of experience in the industry. You can contact me at my email(abdulrehman0796@gmail.com) for any projects 😊
