[Huawei Developers] Freemind R:
More articles like this, you can visit HUAWEI Developer Forum.​

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624120342.01283715533163957378476844931843:50510707065248:2800:97E55C81C2F657C4439892085E5DB091A32265F665E652B9FC26D264B60F071D.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624120342.01283715533163957378476844931843:50510707065248:2800:97E55C81C2F657C4439892085E5DB091A32265F665E652B9FC26D264B60F071D.png[/IMG]​

Introduction

Now days, most of the application integrate an Maps. This article I will give you the process on how to do. Millions of users look up directions, plan their commutes, catch a ride.as well as touch on the many things available through maps to enhance the user experience in mobile apps.

Let’s Start how to Integrate Map:

Step1: create a new project in Android studio.

Step 2: Configure your app into AGC.

Step 3: Enable required Api & add SHA-256.

Step 4: Download the agconnect-services.json from AGC. Paste into app directory.

Step 5: Add the below dependency in app.gradle file.

implementation 'com.huawei.hms:maps:4.0.0.301'

Step 6: Add the below dependency in root.gradle file

maven { url 'http://developer.huawei.com/repo/' }

Step 7: Add appId & permissions in AndoridManifest.xml file

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

<meta-data
android:name="com.huawei.hms.client.appid"
android:value="appid=*******" />

Step 8: Sync your Project

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624120924.55747530585186583220788837624125:50510707065248:2800:79553DA287C12E3A406786EAE329CEEB2D88FBC0F3E6A1FF0EF68373955AA07A.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624120924.55747530585186583220788837624125:50510707065248:2800:79553DA287C12E3A406786EAE329CEEB2D88FBC0F3E6A1FF0EF68373955AA07A.png[/IMG]​

Let’s Discuss functionality:

1.OnMapReady()

2.OnMapClick()

3.OnMarkerClick()

4.Create Circle

5.Create Custom Marker

1. OnMapReady: This Callback interface for when map is ready to be used

@Override
public void onMapReady(HuaweiMap map) {
mHuaweiMap = map;
enableUiSettings();
mHuaweiMap.setMaxZoomPreference(15);
mHuaweiMap.setMinZoomPreference(2);
}

2. OnMapClick : This callback interface when the user makes tap on the map.

@Override
public void onMapClick(LatLng latLng) {

try {
createMarker(latLng);
} catch (IOException e) {
e.printStackTrace();
}
}

3. OnMarkerClick : This callback interface when a marker is clicked

@Override
public boolean onMarkerClick(Marker marker) {
marker.showInfoWindow();
return true;
}

4. How to create circle on map:

private void addCircleToCurrentLocation() {
mHuaweiMap.addCircle(new CircleOptions()
.center(new LatLng(12.9716, 77.5946))
.radius(1000)
.strokeWidth(10)
.strokeColor(Color.GREEN)
.fillColor(Color.argb(128, 255, 0, 0))
.clickable(true));
}

5. How to create marker:

private void createMarker(LatLng latLng) throws IOException {
MarkerOptions markerOptions = new MarkerOptions()
.position(latLng)
.snippet("Address : " + featchAddress(latLng))
.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_location));
mHuaweiMap.addMarker(markerOptions);
CameraPosition cameraPosition = new CameraPosition.Builder()
.target(latLng) // Sets the center of the map to location user
.zoom(20) // Sets the zoom
.bearing(90) // Sets the orientation of the camera to east
.tilt(40) // Sets the tilt of the camera to 30 degrees
.build(); // Creates a CameraPosition from the builder
mHuaweiMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
mHuaweiMap.setOnMarkerClickListener(this);

}

In this article I covered few basics callbacks. below is the final code

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback, HuaweiMap.OnMapClickListener, HuaweiMap.OnMarkerClickListener {

private static final String MAPVIEW_BUNDLE_KEY = "MapViewBundleKey";

private static final int REQUEST_CODE = 100;

private static final LatLng LAT_LNG = new LatLng(12.9716, 77.5946);

private HuaweiMap mHuaweiMap;

private MapView mMapView;

private Button btnCustom;

private static final String[] RUNTIME_PERMISSIONS = {Manifest.permission.WRITE_EXTERNAL_STORAGE,
Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.ACCESS_COARSE_LOCATION,
Manifest.permission.ACCESS_FINE_LOCATION, Manifest.permission.INTERNET};
private Marker marker;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnCustom = findViewById(R.id.btn_custom);
if (!hasPermissions(this, RUNTIME_PERMISSIONS)) {
ActivityCompat.requestPermissions(this, RUNTIME_PERMISSIONS, REQUEST_CODE);
}
mMapView = findViewById(R.id.mapView);
Bundle mapViewBundle = null;
if (savedInstanceState != null) {
mapViewBundle = savedInstanceState.getBundle(MAPVIEW_BUNDLE_KEY);
}
init(mapViewBundle);

btnCustom.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mHuaweiMap.setOnMapClickListener(MainActivity.this);
}
});

}

private void init(Bundle mapViewBundle) {
mMapView.onCreate(mapViewBundle);
mMapView.getMapAsync(this);
}
@Override
public void onMapReady(HuaweiMap map) {
mHuaweiMap = map;
enableUiSettings();
mHuaweiMap.setMaxZoomPreference(15);
mHuaweiMap.setMinZoomPreference(2);
addCircleToCurrentLocation();

}

/*
Enable Ui Settings
*/
private void enableUiSettings() {
mHuaweiMap.setMyLocationEnabled(true);
mHuaweiMap.getUiSettings().setMyLocationButtonEnabled(true);
mHuaweiMap.getUiSettings().setCompassEnabled(true);
mHuaweiMap.getUiSettings().setZoomControlsEnabled(true);
mHuaweiMap.getUiSettings().setMyLocationButtonEnabled(true);
}

/*
Create Circle to current location
*/
private void addCircleToCurrentLocation() {
mHuaweiMap.addCircle(new CircleOptions()
.center(new LatLng(12.9716, 77.5946))
.radius(1000)
.strokeWidth(10)
.strokeColor(Color.GREEN)
.fillColor(Color.argb(128, 255, 0, 0))
.clickable(true));
}

/*
Create Marker when you click on map
*/
private void createMarker(LatLng latLng) throws IOException {
MarkerOptions markerOptions = new MarkerOptions()
.position(latLng)
.snippet("Address : " + featchAddress(latLng))
.icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_location));
mHuaweiMap.addMarker(markerOptions);
CameraPosition cameraPosition = new CameraPosition.Builder()
.target(latLng) // Sets the center of the map to location user
.zoom(20) // Sets the zoom
.bearing(90) // Sets the orientation of the camera to east
.tilt(40) // Sets the tilt of the camera to 30 degrees
.build(); // Creates a CameraPosition from the builder
mHuaweiMap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
mHuaweiMap.setOnMarkerClickListener(this);

}

/*
Convert from latlong to Address
*/
private String featchAddress(LatLng latLng) throws IOException {
Geocoder geocoder = new Geocoder(this, Locale.ENGLISH);
List<Address> addresses = geocoder.getFromLocation(latLng.latitude, latLng.latitude, 1);
Toast.makeText(this, addresses.get(0).getLocality() + ", "
+ addresses.get(0).getAdminArea() + ", "
+ addresses.get(0).getCountryName(), Toast.LENGTH_SHORT).show();
return addresses.get(0).getLocality() + ", "
+ addresses.get(0).getAdminArea() + ", "
+ addresses.get(0).getCountryName();
}

private static boolean hasPermissions(Context context, String... permissions) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && permissions != null) {
for (String permission : permissions) {
if (ActivityCompat.checkSelfPermission(context, permission) != PackageManager.PERMISSION_GRANTED) {
return false;
}
}
}
return true;
}

@Override
public void onMapClick(LatLng latLng) {

try {
createMarker(latLng);
} catch (IOException e) {
e.printStackTrace();
}
}

@Override
public boolean onMarkerClick(Marker marker) {
marker.showInfoWindow();
return true;
}

Output:

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121447.16963621193272807323895317477871:50510707065248:2800:7F65564728CCBD3B7FD780CC8151CAF9339C37FCAB40C5FEE381DDDC45BA049C.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121447.16963621193272807323895317477871:50510707065248:2800:7F65564728CCBD3B7FD780CC8151CAF9339C37FCAB40C5FEE381DDDC45BA049C.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121452.72057913055220054430047738981972:50510707065248:2800:F3EDD0E5269C01879DA35EBC6C348DD1FB8EADAC09E10A062B1DA669C4904704.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121452.72057913055220054430047738981972:50510707065248:2800:F3EDD0E5269C01879DA35EBC6C348DD1FB8EADAC09E10A062B1DA669C4904704.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121502.09555225521749815138750318511560:50510707065248:2800:E60869D73A413C7F94460C0ECF7C28390A98472BF2458EE333A0F514EA00B486.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121502.09555225521749815138750318511560:50510707065248:2800:E60869D73A413C7F94460C0ECF7C28390A98472BF2458EE333A0F514EA00B486.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121507.15530125093255590002845267675421:50510707065248:2800:B131ADD9F4C04438E29C61266079D06841FC9DEAD2AC31B253A4AF52E5FAEE3F.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121507.15530125093255590002845267675421:50510707065248:2800:B131ADD9F4C04438E29C61266079D06841FC9DEAD2AC31B253A4AF52E5FAEE3F.png[/IMG]

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121514.11456146948672010307695935498214:50510707065248:2800:35EC261FF9F2C0BD3AC51AD683BA30C09CA6BA176FEAE9F6D168D602C716D2A6.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/001/767/951/2640091000001767951.20200624121514.11456146948672010307695935498214:50510707065248:2800:35EC261FF9F2C0BD3AC51AD683BA30C09CA6BA176FEAE9F6D168D602C716D2A6.png[/IMG]​

Conclusion:

In this article you’ve learned how to create custom markers, how callbacks will work, as well as new ways for users to interact with the map.

https://developer.huawei.com/consumer/en/doc/development/HMS-References/hms-map-cameraupdate

Reference: