How to Integrate Google Maps into Your Android App?
Maps are of great use and can increase the productivity of your Android app. Google Maps API allows you to integrate Google Maps into your Android application. You can show any location on the map or show different routes on the map too. You can also customise the map according to your choices.
The process for integration of Google Maps into your Android app is easy. If you are still learning about Android app development, follow this article till the end of it, and you will know how to integrate Google Maps into your Android App. Let’s go!
Create A New Android Project
Start by creating a new Android project in the Android studio. It just takes five easy steps to create a new Android project:
- Step 1: Open the Android Studio
- Step 2: Click on “Create New Project”
- Step 3: Select the “Empty Activity” as your project template
- Step 4: Click on the “Next” button
- Step 5: Configure your project by entering the name and clicking on the “Finish” button
Now that you have created a new Android project, the next step is to create a Google Maps API key for your app.
Create A Google Maps API Key For Your App
- Step 1: Google Developer Console
- Step 2: Log in with your email
- Step 3: Click on the top left-hand side
- Step 4: Click on APIs and Services
- Step 5: Choose “Enabled APIs and Services”.
- Step 6: Click on “Create Project”.
- Step 7: Enter “Project Name”.
- Step 8: Click on the “Create” button.
- Step 1: Click on “Enable APIs and services”.
- Step 2: Select “Maps SDK for Android”.
- Step 3: Click on the “Enable” button.
- Step 1: Click on “Credentials” on the vertical left-hand side tab.
- Step 2: Click on the “Create Credentials” button to get the credential of your new Google Map API key.
- Step 3: Select the API key from the drop-down.
Add Google Maps Dependency
The steps to add Google Maps dependency are:
- Step 1: Go to Android Studio
- Step 2: Open the build. gradle that indicates the module
- Step 3: Head to the dependencies.
- Step 4: Paste the following dependency there:
implementation ‘com.google.android.gms:play-services-maps:18.1.0’
- Step 5: Click on “Sync Now” visible on the top right-hand side.
Once you add the dependency, close the tab. The next step is to add the metadata.
Add The Metadata
The steps to add the Metadata are:
- Step 1: Use the following Metadata:
<meta-data
android:name=”com.google.android.geo.API_KEY”
android:value=”${MAPS_API_KEY}” /> - Step 2: Go to Android Studio
- Step 3: Open the AndroidManifest.xml file under the manifests folder
- Step 4: Paste the Metadata inside the application text
The next step is to store your Google Maps API key in string.xml.
Use The Google Maps API Key
The steps to use and store the Google Maps API key in string.xml are:
- Step 1: Click on the res tab on the left-hand side
- Step 2: Expand the values drop-down and select string.xml.
- Step 3: Create a string here
- <string name= “my_map_api_key”></string>
- Step 4: Paste the Google Maps API key you created in the above string
- Step 5: Go to the AndroidManifest.xml file again
- Step 6: Replace the Android value in the Metadata to @string/my_map_api_key
- Step 7: Close the manifest file now
The next step is to declare a fragment to define the structure of the UI of your app.
Declare A Fragment
Replace the TextView in the activity_main.xml file with the following piece of code that declares a fragment:
<fragment
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/map”
android:name=” com.google.android.gms.maps.SupportMapFragment” />
Implement the OnMapReady Callback
The steps to implement the OnMapReady callback are:
- Step 1: Go to the MainActivity tab
- Step 2: Implement the OnMapReady callback to the below line of code:
public class MapsActivity extends AppCompatActivity - Step 3: Now the line of code will look like this:
public class MapsActivity extends AppCompatActivity implements OnMapReadyCallback - Step 4: Click on the red bulb appearing on the line of code and select implement methods
- Step 5: Select the OnMapReady method and click “Ok”.
You may think, why do you need to use the OnMapReady method?
You need to use the OnMapReady method because Google Maps take milliseconds to load on Oncreate, and it will give you the null pointer exception. Hence, OnMapReady is a better choice for loading the map when it’s ready.
Create A Google Map Variable
The steps to create a Google Map Variable are:
- Step 1: Add the following line of code:
private GoogleMap mymap;
Tip: Choose to name of the map as per your wish - Step 2: Now call the SupportMapFragment and cast it to map fragment
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
SupportMapFragment mapFragment = getSupportFragmentManager().findFragmentById(R.id.map);
}
- Step 3: Recast the support map fragment, and now the piece of code will look like this:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SupportMapFragment mapFragment = (SupportMapFragment} getSupportFragmentManager().findFragmentById(R.id.map);
}
- Step 4: Call your map fragment using getMapAsync, and your updated piece of code will look like this:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SupportMapFragment mapFragment = (SupportMapFragment} getSupportFragmentManager().findFragmentById(R.id.map);
mapFragment.getMapAync (callback this);
}
Initialise Google Map Variables
The steps to initialise Google Map variables are:
- Step 1: Initialise the Google Map using the following line of code:
myMap = googleMap; - Step 2: Add latitudes and longitudes and pass the values using the following piece of code:
Syntax: Latlng <name of your location> = new Latlng (latitude value, longitude value); - Step 3: Call your map and add the marker using the following piece of code
myMap.addmarker (new MarkerOptions().position()) - Step 4: Pass the name of your location and add the title using the following code:
Syntax: myMap.addmarker (new MarkerOptions().position(name of your location).title(“Add The Title”) - Step 5: Move the camera using the following code:
Syntax: mpMap.moveCamera(CameraUpdateFactory.newLatLng(name of your location));
Now, run your application. You will see your Google map is loaded and shows your location because you passed its latitude and longitude.
Let’s Wrap!
These nine steps are easy to follow and will help you integrate Google Maps into your Android app. While the above steps use Javascript, you can also use Kotlin to integrate Google Maps into your Android app. Make sure you bookmark this page to use this information when you need it!
You may also like
How to Use Firebase to Build Real-Time Apps for Android
Creating custom animation in your Android app
