Android Google Map – Switching between Map view and Satellite view

October 1, 2012
By

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”

Create a new Android application Project

Figure 1 : Create a new Android application Project


2. Design application launcher icon

Design Application Launcher Icon

Figure 2 : Design Application Launcher Icon


3. Create a blank activity to define the class MainActivity

Create a blank Activity

Figure 3 : Create a blank Activity


4. Enter MainActivity details

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

Google Map in Google's API Emulator ( API Level 7 )

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

Satellite View Google Map in Google APIs ( API Level 7 )

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


12. Download


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: , ,

5 Responses to Android Google Map – Switching between Map view and Satellite view

  1. GauravKumawat on December 25, 2012 at 6:22 pm

    Great way of writting …………hat’s off….
    i like every single post of yours………

  2. Nguyễn Hải Trường on January 23, 2013 at 2:07 pm

    Thank you so much for this tutorial, that’s very kind of you.

  3. budaq on May 21, 2013 at 1:55 am

    hello george..
    i try your tutorial..is great..
    i try to change map view to display map plan(photo format) but is not working..can u tell me what coding should i use.?

  4. joe on August 1, 2013 at 2:38 pm

    is this working on google maps V2? not works for me on it

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner