How to Use Different Types of Google Maps in Android?
When we use the default application of Google Maps we will get to see different types of Maps present inside this application. We will get to see satellite maps, terrain maps, and many more. We have seen adding Google Maps in the Android application. In this article, we will take a look at the implementation of different types of Google Maps in Android.
What we are going to build in this article?
We will be building a simple application in which we will be simply displaying a Google map with three buttons and we will change the map with the help of these buttons. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language. Make sure to select Maps Activity while creating a new Project.
Step 2: Generating an API key for using Google Maps
To generate the API key for Maps you may refer to How to Generate API Key for Using Google Maps in Android. After generating your API key for Google Maps. We have to add this key to our Project. For adding this key in our app navigate to the values folder > google_maps_api.xml file and at line 23 you have to add your API key in the place of YOUR_API_KEY.
Step 3: Working with the activity_maps.xml file
Navigate to the app > res > layout > activity_maps.xml and add the below code to it. Comments are added in the code to get to know in more detail.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android" android:layout_width = "match_parent" android:layout_height = "match_parent" > <!--fragment to display our map--> < fragment xmlns:tools = "http://schemas.android.com/tools" android:id = "@+id/map" android:name = "com.google.android.gms.maps.SupportMapFragment" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MapsActivity" /> < LinearLayout android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_alignParentBottom = "true" android:layout_margin = "5dp" android:orientation = "horizontal" android:padding = "5dp" android:weightSum = "3" > <!--button for displaying hybrid map--> < Button android:id = "@+id/idBtnHybridMap" android:layout_width = "0dp" android:layout_height = "wrap_content" android:layout_margin = "5dp" android:layout_weight = "1" android:background = "@color/purple_500" android:singleLine = "false" android:text = "Hybrid \n Map" android:textAllCaps = "false" android:textColor = "@color/white" /> <!--button for displaying satellite map--> < Button android:id = "@+id/idBtnSatelliteMap" android:layout_width = "0dp" android:layout_height = "wrap_content" android:layout_margin = "5dp" android:layout_weight = "1" android:background = "@color/purple_500" android:singleLine = "false" android:text = "Satellite \n Map" android:textAllCaps = "false" android:textColor = "@color/white" /> <!--button for displaying terrain map--> < Button android:id = "@+id/idBtnTerrainMap" android:layout_width = "0dp" android:layout_height = "wrap_content" android:layout_margin = "5dp" android:layout_weight = "1" android:background = "@color/purple_500" android:singleLine = "false" android:text = "Terrain \n Map" android:textAllCaps = "false" android:textColor = "@color/white" /> </ LinearLayout > </ RelativeLayout > |
Step 4: Working with the MapsActivity.java file
Go to the MapsActivity.java file and refer to the following code. Below is the code for the MapsActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle; import android.view.View; import android.widget.Button; import androidx.fragment.app.FragmentActivity; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.SupportMapFragment; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MarkerOptions; public class MapsActivity extends FragmentActivity implements OnMapReadyCallback { private GoogleMap mMap; // below are the latitude and longitude // of delhi locations. LatLng delhi = new LatLng( 28.644800 , 77.216721 ); // creating a variable for button. private Button hybridMapBtn, terrainMapBtn, satelliteMapBtn; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_maps); // initialize our buttons hybridMapBtn = findViewById(R.id.idBtnHybridMap); terrainMapBtn = findViewById(R.id.idBtnTerrainMap); satelliteMapBtn = findViewById(R.id.idBtnSatelliteMap); // Obtain the SupportMapFragment and get notified when the map is ready to be used. SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map); mapFragment.getMapAsync( this ); // adding on click listener for our hybrid map button. hybridMapBtn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // below line is to change // the type of map to hybrid. mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID); } }); // adding on click listener for our terrain map button. terrainMapBtn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // below line is to change // the type of terrain map. mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN); } }); // adding on click listener for our satellite map button. satelliteMapBtn.setOnClickListener( new View.OnClickListener() { @Override public void onClick(View v) { // below line is to change the // type of satellite map. mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE); } }); } @Override public void onMapReady(GoogleMap googleMap) { mMap = googleMap; // adding marker to each location on google maps mMap.addMarker( new MarkerOptions().position(delhi).title( "Marker in Delhi" )); // below line is use to move camera. mMap.moveCamera(CameraUpdateFactory.newLatLng(delhi)); } } |
Now run your app and see the output of the app.
Contact Us