Setup Map on an Android Application in smart way

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.

Sample Output

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.

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

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

<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

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

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.

public void onMapClick(LatLng latLng) {    try {        createMarker(latLng);    } catch (IOException e) {        e.printStackTrace();    }}

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

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

4. How to create circle on map:

    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:

    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);
}

6.How to get address from latlong:

    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();}

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

    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:

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.

Reference:

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