How to show location on Map in Android

How to show location on Map in Android

As we have already looked at how to fetch the user's location in Android. The corresponding blog can be found here -

Now we will look at how to show a corresponding location on google maps on Android.

1. Adding dependency in Gradle

Add the following dependency in your build.gradle(app) file:

dependencies {
    implementation 'com.google.android.gms:play-services-maps:18.0.1'
}

2. Create your API Key

Create an API key from the following link so as to use the Google Maps SDK (Remember to restrict the API key before using it in production)

After getting the key, add this to your Manifest.xml file.

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY" /> // Your API String here

3. Adding fragment to the layout file

Add a <fragment> element to your activity's layout file, activity_maps.xml. This element defines a SupportMapFragment to act as a container for the map and to provide access to the GoogleMap object.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MapActivity">

    <fragment
        android:id="@+id/google_map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:context="com.example.mapwithmarker.MapsMarkerActivity"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

4. Main Logic

In MapActivity.java,

  • get a handle to the map fragment by calling FragmentManager.findFragmentById()
  • Then use getMapAsync() to register for the map callback
public class MapActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_map);

        SupportMapFragment supportMapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.google_map);
        assert supportMapFragment != null;
        supportMapFragment.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull GoogleMap googleMap) {
                // Logic here
            }
        });
    }
}

Coming to onMapReady() method logic now

public void onMapReady(@NonNull GoogleMap googleMap) {
    LatLng latLng = new LatLng(latitude,longitude);
    MarkerOptions markerOptions = new MarkerOptions().position(latLng).title("I am here!");
    googleMap.animateCamera(CameraUpdateFactory.newLatLng(latLng));
    googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 10));
    googleMap.addMarker(markerOptions);
}

The code portion is complete but let us understand the camera and view we have used above (animateCamera)

Understanding Camera and View

The maps in the Maps SDK for Android can be tilted and rotated with easy gestures, giving users the ability to adjust the map with an orientation that makes sense for them. At any zoom level, you can pan the map, or change its perspective with very little latency.

3D buildings on the map

Many cities, when viewed close up, will have 3D buildings visible, as viewable in the below picture of Vancouver, Canada. You can disable the 3d buildings by calling GoogleMap.setBuildingsEnabled(false)

image.png

The camera position

The map view is modeled as a camera looking down on a flat plane. The position of the camera (and hence the rendering of the map) is specified by the following properties:

  • target (latitude/longitude location)
  • bearing
  • tilt
  • zoom

image.png

Target (location)

The camera target is the location of the center of the map, specified as latitude and longitude coordinates.

Bearing (orientation)

The camera bearing is the direction in which a vertical line on the map points, measured in degrees clockwise from north. Someone driving a car often turns a road map to align it with their direction of travel, while hikers using a map and compass usually orient the map so that a vertical line is pointing north. The Maps API lets you change a map's alignment or bearing. For example, a bearing of 90 degrees results in a map where the upwards direction points due east.

Tilt (viewing angle)

The tilt defines the camera's position on an arc between directly over the map's center position and the surface of the Earth, measured in degrees from the nadir (the direction pointing directly below the camera). When you change the viewing angle, the map appears in perspective, with far-away features appearing smaller, and nearby features appearing larger. The following illustrations demonstrate this.

In the images below, the viewing angle is 0 degrees. The first image shows a schematic of this; position 1 is the camera position, and position 2 is the current map position. The resulting map is shown below it.

image.png

The above map is displayed with the camera's default viewing angle.

In the images below, the viewing angle is 45 degrees. Notice that the camera isn't tilted at 45 degrees; instead, it moves halfway along an arc between straight overhead (0 degrees) and the ground (90 degrees), to position 3. The camera is still pointing at the map's center point, but now the area represented by the line at position 4 is now visible.

image.png

The above map is displayed with a viewing angle of 45 degrees

Zoom

The zoom level of the camera determines the scale of the map. At larger zoom levels more detail can be seen on the screen, while at smaller zoom levels more of the world can be seen on the screen. At zoom level 0, the scale of the map is such that the entire world has a width of approximately 256dp.

Increasing the zoom level by 1 double the width of the world on the screen. Hence at zoom level N, the width of the world is approximately 256 * 2N dp, i.e., at zoom level 2, the whole world is approximately 1024dp wide The following list shows the approximate level of detail you can expect to see at each zoom level:

  • 1: World
  • 5: Landmass/continent
  • 10: City
  • 15: Streets
  • 20: Buildings

The following images show the visual appearance of different zoom levels:

image.png

Note: Due to screen size and density, some devices may not support the lowest zoom levels. Use GoogleMap.getMinimumZoomLevel() to get the minimum zoom level possible for the map

Moving the camera

To change the position of the camera, you must specify where you want to move the camera, using a CameraUpdate. The Maps API allows you to create many different types of CameraUpdate using CameraUpdateFactory. The following options are available:

Changing zoom level and setting minimum/maximum zoom

  • CameraUpdateFactory.zoomIn() and CameraUpdateFactory.zoomOut() give you a CameraUpdate that changes the zoom level by 1.0, while keeping all other properties the same.

  • CameraUpdateFactory.zoomTo(float) gives you a CameraUpdate that changes the zoom level to the given value, while keeping all other properties the same.

  • CameraUpdateFactory.zoomBy(float) and CameraUpdateFactory.zoomBy(float, Point) gives you a CameraUpdate that increases (or decreases, if the value is negative) the zoom level by the given value. The latter fixes the given point on the screen such that it remains at the same location (latitude/longitude) and so it may change the location of the camera in order to achieve this.

Changing camera position

  • CameraUpdateFactory.newLatLng(LatLng) gives you a CameraUpdate that changes the camera's latitude and longitude while preserving all other properties.

  • CameraUpdateFactory.newLatLngZoom(LatLng, float) gives you a CameraUpdate that changes the camera's latitude, longitude, and zoom while preserving all other properties.

  • For full flexibility in changing the camera position, use CameraUpdateFactory.newCameraPosition(CameraPosition) which gives you a CameraUpdate that moves the camera to the given position. A CameraPosition can be obtained either directly, using new CameraPosition() or with a CameraPosition.Builder using new CameraPosition.Builder()

Panning (scrolling)

  • CameraUpdateFactory.scrollBy(float, float) gives you a CameraUpdate that changes the camera's latitude and longitude such that the map moves by the specified number of pixels. A positive x value causes the camera to move to the right, so that the map appears to have moved to the left. A positive y value causes the camera to move down, so that the map appears to have moved up. Conversely, negative x values cause the camera to move to the left, so that the map appears to have moved right and negative y values cause the camera to move up. The scrolling is relative to the camera's current orientation. For example, if the camera has a bearing of 90 degrees, then east is "up".

Conclusion

This is the end of the blog. Make sure to give a follow if you liked this.
Thanks💛