Introduction
In an earlier article, we learned about the setup needed for building mobile Android application that use Google Maps. In this article, we will create an Android application that uses Google Maps.
Hands On
In our earlier article, we had finished configuring our default project to work with Google Maps. We will continue from there.
Open activity_main.xml in Text View. You will see the default text as shown in the following code segment:
<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" android_paddingLeft="@dimen/activity_horizontal_margin" android_paddingRight="@dimen/activity_horizontal_margin" android_paddingTop="@dimen/activity_vertical_margin" android_paddingBottom="@dimen/activity_vertical_margin" tools_context=".MainActivity"> <TextView android_text="@string/hello_world" android_layout_width="wrap_content" android_layout_height="wrap_content" /> </RelativeLayout>
We will invoke Google Maps in two different ways: one via MapFragment and other via MapView. In this article, we will use MapFragment for our mapping needs.
We will add a new Blank activity to the project, called FragmentMapActivity.
Figure 1: The new, Blank activity
We will now change the activity content to contain a map fragment.
Open the layout file and change the contents, as follows:
<fragment xmlns_android="http://schemas.android.com/apk/res/android" xmlns_map="http://schemas.android.com/apk/res-auto" android_id="@+id/map" android_layout_width="match_parent" android_layout_height="match_parent" android_name="com.google.android.gms.maps.MapFragment"/>
Next, we will edit the class file FragmentMapActivity.java.
We will include new imports because we will be using them in the class.
package com.example.vipulp.myapplication; import android.support.v4.app.FragmentActivity; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.app.Activity; import com.google.android.gms.maps.CameraUpdate; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.MapFragment; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.model.LatLng;
We will update the signature of the class definition. We will make two changes:
- We will extend the class from Activity.
- We will implement OnMapReadyCallback because we want to initialize the map to center on Google headquarters in Mountain View, California.
// Class definition public class FragmentMapActivity extends Activity implements OnMapReadyCallback {GoogleMap mMap;
We will now make changes in the default code that was generated. Here, we create a map fragment and
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_fragment_map); MapFragment mapFragment = (MapFragment) getFragmentManager().findFragmentById(R.id.map); mapFragment.getMapAsync(this); }
For the last change, we will implement the onMapReady callback where we will set the local GoogleMaps object and center it on Mountain View.
@Override public void onMapReady(final GoogleMap map) { this.mMap = map; // latitude and longitude of Google Headquarters in // Mountain View, California, USA LatLng coordinate = new LatLng(37.423340, -122.087891); CameraUpdate yourLocation = CameraUpdateFactory.newLatLngZoom(coordinate, 15); mMap.animateCamera(yourLocation); }
Our FragmentMapActivity class is now ready.
We will add a button in MainActviity class and implement a click handler on the button to invoke FragmentMapActivity.
Add a Button element on the layout file activity_main.xml.
<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" android_paddingLeft="@dimen/activity_horizontal_margin" android_paddingRight="@dimen/activity_horizontal_margin" android_paddingTop="@dimen/activity_vertical_margin" android_paddingBottom="@dimen/activity_vertical_margin" tools_context=".MainActivity"> <TextView android_text="@string/hello_world" android_layout_width="wrap_content" android_layout_height="wrap_content" android_id="@+id/textView" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Fragment Map" android:id="@+id/buttonFragmentMap" android:layout_below="@+id/textView" android:layout_centerHorizontal="true" android:layout_marginTop="79dp" android:onClick="openFragmentMap"/> </RelativeLayout>
In MainActivity.java file, we will add a couple of import statements that we will use later.
import android.content.Intent; import android.view.View;
Lastly, we will implement the click handler for the button.
public void openFragmentMap(View view) { Intent intent = new Intent(this, FragmentMapActivity.class); startActivity(intent); }
Our mapping application is now ready. We can run this in the Android emulator or the phone; you will be able to see that the map is shown when we click the button on the application’s home screen.
Summary
In this article, we learned how we can use MapFragment to build a map and center it to a specific location. I hope you have found this information useful.
About the Author
Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.