👨🏼‍💻Implementing Different Map Types in Flutter Android Project (Huawei Map, Google Map, Mapbox)
In this article, we will add Huawei map, Google map and Mapbox map to our flutter project. All map types we will mention is very important.
Introduction
Location is in everywhere. If we want to go somewhere we have never been in, we use maps in our devices. If we want to find places in somewhere, we use maps too. We use maps in at least 1 project in our lifes. Let’s learn how to implement 3 powerful maps to projects.
1. Huawei Map
1.1 Overview
If you create a Flutter app which includes Google map, you want to publish it in Huawei App Gallery market. What happens?
You know Google services don’t allowed to use for Huawei devices. At this point , Huawei Map helps us. You can use Huawei Map for AppGallery projects.
Note: This package only supports Android platform
Note2: It might not run in the some non huawei devices
You can add huawei_map to your project here.
Huawei Map Kit provides the followings (from pub.dev):
Huawei Map: Core map component with tons of features.
My Location: Your location on the map.
Markers: Adding markers on the map with tons of modifications with their InfoWindow component.
Polylines: Adding polylines on the map with tons of modifications.
Polygons: Adding polygons on the map with tons of modifications.
Circles: Adding circles on the map with tons of modifications.
Ground Overlays: Adding ground overlays on the map with tons of modifications.
Tile Overlays: Adding tile overlays on the map with tons of modifications.
If you want to read all documentation about Huawei Map , just visit here.
1.2 Implementation
i. Create Flutter Project:
ii. Go to Developer page of Huawei and sign in. You need to have an account. Sign in here.
iii. Go to console
iv. Go to AppGallery Connect
v. Go to My Projects and add new project
Click continue button and select Country from window. Generally we select Germany. And click Ok.
Click enable button. Congratulations, you created new project.
vi. Add your app to AppGallery
Note: Package name from your project’s manifest file
vii. Download and add agconnect-services.json file to your project.
viii. Go to your project in AppGallery connect. Go to General Settings page. Add SHA-256 certificate fingerprint to the project.
ix. Enable Map kit from AppGallery
x. Add these permissions to Android manifest file
xi. Add huawei_map to flutter pubspec.yaml -> dependencies part:
xii. Add HuaweiMapInitializer.initializeMap(); to your Statefulwidget’s initState:
void initState() {
HuaweiMapInitializer.initializeMap();
super.initState();
}xiii. Add Huawei Map to your widget. That’s All:
2. Google Map
Add google_maps_flutter to your project here.
Note: If your device does not have Google Play services, you can not use Google map in your device.
Implementation
1. Get Google Map Api key
Get an API key here. I don’t explain how we get api key. You can follow instructions explained in here.
2. Flutter Implementation
i. Set your min sdk version in android/app/build.gradle :
ii. Add permissions and specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:
iii. Add google_maps_flutter to pubspec.yaml file
iv. Add Google Map to your widget. That’s all:
3. Mapbox
3.1 Overview
In the mapbox pub.dev documentation:
This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget. For the Android and iOS integration, we use mapbox-gl-native. For web, we rely on mapbox-gl-js.
Note: We will use Visual Studio code for Mapbox integration
Note 2: It might not run in the some huawei devices
3.2 Implementation
i. Create mapbox account from here.
ii. Get access token from account.mapbox.com
Click “Create a token” button and “create token”
i. Add mapbox_gl package to your pubspec.yaml file:
ii. Add permissions to AndroidManifest.xml file
iii. Add your access token to AndroidManifest.xml
iv. Add multiDexEnabled to build.gradle (app level)
In the defauldConfig set multiDexEnabled to true
v. Open your project in Visual Studio code
Note: This step only works in Visual Studio code
Click the icon showed below:
Click Flutter&Dart. It will automatically create launch.json file:
Add this line to launch.json file:
“env”: { “SDK_REGISTRY_TOKEN” : “YOUR_ACCESS_TOKEN” }
vi. Add Mapbox Map to your widget. That’s all:
Conclusion:
There are well featured maps for flutter projects. We explained most useful maps in this article. We hope you will use all these maps in your project.
I wish everyone a pleasant Flutter week :)
