Android app development is one of the most popular fields of mobile development today. With various libraries and frameworks, developers can create apps that provide excellent user experiences. In this course, we will explain how to create an Android app that utilizes Google Maps using Java. This course will proceed in the following steps:
- 1. Project Setup
- 2. Google Maps API Setup
- 3. Displaying the Map in the App
- 4. Adding Markers and Displaying User Location
- 5. Adding Map Styles and Features
1. Project Setup
First, open Android Studio and create a new project. Follow the settings below to set up the project:
- Name: GoogleMapsApp
- Package Name: com.example.googlemapsapp
- Language: Java
- Minimum API Level: API 21: Android 5.0 (Lollipop)
Once the project is created, you need to add the Google Maps library to the app/build.gradle
file. To do this, add the following code to the dependencies section:
implementation 'com.google.android.gms:play-services-maps:18.0.2'
Now sync the Gradle file to update the dependencies.
2. Google Maps API Setup
To use Google Maps, you need to obtain an API key from the Google Cloud Platform. Follow these steps to create a Google Maps API key:
- Log in to Google Cloud Platform and create a new project.
- In the dashboard, go to ‘APIs & Services’ -> ‘Library’.
- Search for ‘Google Maps Android API’ and enable it.
- In ‘APIs & Services’ -> ‘Credentials’, click the ‘Create Credentials’ button.
- Select ‘API Key’ and generate it, then copy the key you received.
You need to add the generated API key to the AndroidManifest.xml
file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.googlemapsapp">
<application>
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="YOUR_API_KEY"/>
...
</application>
</manifest>
Now your Google Maps API is ready to use.
3. Displaying the Map in the App
To display Google Maps in the app, you need to add a map fragment to the layout. Open the res/layout/activity_main.xml
file and add the following code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<fragment
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Next, we will add code to initialize and display the map in the MainActivity.java
file:
import androidx.fragment.app.FragmentActivity;
import android.os.Bundle;
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 MainActivity extends FragmentActivity implements OnMapReadyCallback {
private GoogleMap mMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
// Set the center position of the map
LatLng seoul = new LatLng(37.56, 126.97);
mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul));
}
}
In the code above, we set the camera to move to the location of Seoul when the map is ready.
4. Adding Markers and Displaying User Location
Now, let’s add a marker at a user-defined location. Add the following code in the onMapReady
method to place the marker:
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
// Set the center position of the map
LatLng seoul = new LatLng(37.56, 126.97);
mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul));
// Add marker
mMap.addMarker(new MarkerOptions().position(seoul).title("Marker in Seoul"));
// Allow displaying user location
mMap.setMyLocationEnabled(true);
}
The above code adds a marker at Seoul’s location and enables the functionality to show the user’s current location.
5. Adding Map Styles and Features
Finally, let’s add styles to the Google Map and expand some features. For example, we will have the marker update when the user’s location changes:
import com.google.android.gms.location.LocationCallback;
import com.google.android.gms.location.LocationRequest;
import com.google.android.gms.location.LocationResult;
import com.google.android.gms.location.LocationServices;
public class MainActivity extends FragmentActivity implements OnMapReadyCallback {
private GoogleMap mMap;
private FusedLocationProviderClient fusedLocationClient;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fusedLocationClient = LocationServices.getFusedLocationProviderClient(this);
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
LatLng seoul = new LatLng(37.56, 126.97);
mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul));
mMap.addMarker(new MarkerOptions().position(seoul).title("Marker in Seoul"));
mMap.setMyLocationEnabled(true);
// Set up user location updates
startLocationUpdates();
}
private void startLocationUpdates() {
LocationRequest locationRequest = LocationRequest.create();
locationRequest.setInterval(10000);
locationRequest.setFastestInterval(5000);
locationRequest.setPriority(LocationRequest.PRIORITY_HIGH_ACCURACY);
LocationCallback locationCallback = new LocationCallback() {
@Override
public void onLocationResult(LocationResult locationResult) {
if (locationResult == null) {
return;
}
for (Location location : locationResult.getLocations()) {
// Update user location
LatLng userLocation = new LatLng(location.getLatitude(), location.getLongitude());
mMap.addMarker(new MarkerOptions().position(userLocation).title("You are here"));
mMap.moveCamera(CameraUpdateFactory.newLatLng(userLocation));
}
}
};
fusedLocationClient.requestLocationUpdates(locationRequest, locationCallback, null);
}
}
The above code updates the marker whenever the user’s location changes, reflecting the user’s location on the map.
Conclusion
We have now completed all steps to create a basic Google Maps app. This app can be extended for various purposes, such as business or personal projects. Additional features, such as various marker styles, route display, or multiple location searches, can be easily implemented. The Google Maps API is a very useful tool for Android app development. Furthermore, using this API, you can provide a rich experience for users. The next step is to enhance this app with additional features and styles.
We hope this course has been fun and helpful for your app development. Now, go ahead and create your own Google Maps app!