Android Google Map – Switching between Map view and Satellite view

In this article, we will create an Android application which displays Google Map in Map view and Satellite view. Radio buttons provided in the application facilitates users to switch between map view and satellite view.

This application is developed in Eclipse (4.2.0) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 ) .

Update : An upgraded version of this application ( using Google Map Android API V2 ) is available at “Google Map Android API V2 – Switching between Normal View, Satellite View and Terrain View”

1. Create a new Android application project namely “LocationGoogleMapViews”

Figure 1 : Create a new Android application Project

2. Design application launcher icon

Figure 2 : Design Application Launcher Icon

3. Create a blank activity to define the class MainActivity

Figure 3 : Create a blank Activity

4. Enter MainActivity details

Figure 4 : Enter MainActivity Details

5. Delete Android’s Support Library from this project, if exists

By default Eclipse ( 4.2.0) adds Android Support Library to  Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”.

6. Obtain Google Map Key

Google’s Map Key for the Android application will be available here.

The map key obtained has to be entered as the value of the attribute android:apiKey in the layout file res/layout/activity_main.

7. Update the file res/values/strings.xml with the given below code

<resources>

    <string name="app_name">Android Google Map - Views</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_main">Android Google Map - Views</string>

    <string name="str_rb_map">Map View</string>
    <string name="str_rb_satellite">Satellite View</string>

</resources>

8. Update the layout file res/layout/activity_main.xml

<LinearLayout 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:orientation="vertical" >

    <RadioGroup
        android:id="@+id/rg_views"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rb_map"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str_rb_map"
            android:checked="true" />

        <RadioButton
            android:id="@+id/rb_satellite"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/str_rb_satellite" />
    </RadioGroup>

    <com.google.android.maps.MapView
        android:id="@+id/map_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:apiKey="0u7AJChI1NV8vCpj21C0Cq8YnNMrB6YMgigu0GA"
        android:clickable="true" />

</LinearLayout>

Note : Replace the value of android:apiKey with the Google Map Key obtained in Step 6

9. Update the class MainActivity in the file src/in/wptrafficanalyzer/locationgooglemapview/MainActivity.java

package in.wptrafficanalyzer.locationgooglemapviews;

import android.os.Bundle;
import android.view.Menu;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;

public class MainActivity extends MapActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Getting Reference to map_view of the layout activity_main
        MapView mapView = (MapView) findViewById(R.id.map_view);

        // Setting Map View
        mapView.setSatellite(false);

        // Setting Zoom Controls
        mapView.setBuiltInZoomControls(true);

        // Getting reference to rg_views of the layout activity_main
        RadioGroup rgViews = (RadioGroup) findViewById(R.id.rg_views);

        // Defining Checked Change Listener for the RadioGroup
        OnCheckedChangeListener checkedChangeListener = new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                // Getting Reference to map_view of the layout activity_main
                MapView mapView = (MapView) findViewById(R.id.map_view);

                // Currently checked is rb_map
                if(checkedId==R.id.rb_map){
                    mapView.setSatellite(false);
                }

                // Currently checked is rb_satellite
                if(checkedId==R.id.rb_satellite){
                    mapView.setSatellite(true);
                }
            }
        };

        // Setting Checked ChangeListener
        rgViews.setOnCheckedChangeListener(checkedChangeListener);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

    @Override
    protected boolean isRouteDisplayed() {
        // TODO Auto-generated method stub
        return false;
    }
}

10. Update the file AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="in.wptrafficanalyzer.locationgooglemapviews"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="4"
        android:targetSdkVersion="15" />

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <uses-library  android:name="com.google.android.maps" />
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

11. Run the application

Figure 5 : Google Map in Google APIs Emulator ( API Level 7 )

Figure 6 : Satellite View Google Map in Google APIs ( API Level 7 )

12. Download

Android Google Map - Switching between Map view and Satellite view 132.91 KB

Download Full Source Code

13. Reference

http://developer.android.com/guide/index.html

How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com

---

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: Google Map, radio button, radio group