Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 188.8.131.52 release ready!
Owner and Founder. Opencart
In this blog, we will learn about how to add style on google maps in flutter.Sometimes we need or we want to modify the map style according to our own choice.So, here is the solution.
Without wasting time let’s implement the style in google map very quickly.
First add the google_maps_flutter package dependency in Pubspec.yaml file.Then create the map using GoogleMap widget as shown below.
Note:-Don’t forget to add google API key in your AndroidManifest.xml file.
You have created your map successfully.Now you are getting the as shown below.
In Flutter, we need to add style files for both i.e. for iOS and Android separately.
For Android we will add .txt extension file and for iOS we will add .json extension file in the assets folder.
As shown in the below image, Io have added map_style.json and map_style.txt for iOS and Android respectively.
you can create your style with the link https://mapstyle.withgoogle.com/ .
You can use any of the pre-made themes, or create your own style in detail.
Initially, you need to add the asset file path in your pubspec.yaml file and the run pub get command.
Now,parse the files in your initistate method and pass the style to the controller with platform check.
Now, we are done.Run the project and check the output.
for Android, the output will be like as show shown in below image.
For iOS,it will be like as shown in the below image.
As you can see for android and iOS both we have change the view of map completely by adding our own style.
Using this we can add your own style in your flutter application.
Congratulations!!!! you have learned how to implement style in google maps in Flutter.
For more interesting blogs check out here – https://mobikul.com/blog/
Hope this blog helped you with a better understanding of the implementation of style in google maps in Flutter.
Thanks for reading.😇
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
All communication is done through a ticket system. I appreciate the regular almost daily updates of what is being worked on, and communicating changes or updates is easy through this system. Mobikul's response timeframe is quick.
Owner, Shop ATV Escape
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.