loading...

Setup Map on an Android Application in smart way

singlebubble1 profile image singlebubble ・4 min read

Alt Text

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

Sample Output

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

  1. OnMarkerClick : This callback interface when a marker is clicked
@Override
 public boolean onMarkerClick(Marker marker) {
     marker.showInfoWindow();
     return true;
 }
  1. 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));
 }

  1. 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:

Alt Text
Alt Text
Alt Text

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

Posted on by:

singlebubble1 profile

singlebubble

@singlebubble1

live, laough and love coding, cooking and skiing

Discussion

markdown guide