Google Maps Android API v2 - การกำหนดรูปแบบพื้นผิวของ Google Maps

        ช่วงนี้ได้ลอง Google Maps API v2 สำหรับ Android รู้สึกว่าสะดวกขึ้นเยอะเลย ถึงแม้ว่าจะยังคงไม่มีคำสั่งค้นหาสถานที่และแสดงเส้นทางการเดินทางเหมือนเดิม แต่การใช้งานพื้นฐานถือว่าโอเคเลยล่ะ เจ้าของบล็อกรู้สึกว่าใช้ง่าย เข้าใจง่ายดี

        และคราวนี้ก็มาเริ่มกับตัวอย่างพื้นฐานของ GMapsV2 กันต่อเลย โดยบทความนี้จะต่อกันด้วยเรื่องพื้นผิวที่จะแสดงเป็นแผนที่

        สำหรับการติดตั้งเบื้องต้นสำหรับใช้งาน API v2 ให้อ่านที่ [Android Code] การใช้งาน Google Map Android API v2

        สำหรับการแสดงพื้นผิวของ GMapsV2 จะมีทั้งหมดดังนี้

        None : ไม่แสดงพื้นผิวแผนที่

        Normal : แสดงพื้นผิวแบบปกติ

        Satellite : แสดงพื้นผิวด้วยภาพจากดาวเทียม

        Terrain : แสดงพื้นผิวแผนที่แบบภาพภูมิศาสตร์เหมือนที่เคยเรียนวิชาสังคมน่ะแหละ (ในภาพต้องซูมออก)

        Hybrid : แสดงแบบ Normal และ Satellite ผสมกัน

        ส่วนคำสั่งในการกำหนดพื้นผิวที่จะแสดงก็ใช้คำสั่งง่ายๆเลย

GoogleMap mMap = ((SupportMapFragment)getSupportFragmentManager()
        .findFragmentById(R.id.map)).getMap();
mMap.setMapType(GoogleMap.MAP_TYPE_NONE);

        โดยที่ GoogleMap ก็คือคลาสของ Google Map นั่นเอง (อธิบายเพื่อ?) ซึ่งจะกำหนดให้เป็น Map ที่แสดงบน Layout ของแอปพลิเคชันนั่นเอง ดังนั้นถ้าจะใช้คำสั่งกำหนดหรืออื่นๆกับ Google Map ก็ใช้คำสั่งกับ mMap  เช่น setMapType ที่ใช้สำหรับกำหนดว่าจะให้แผนที่แสดงพื้นผิวแบบใด

                GoogleMap.MAP_TYPE_NONE : กำหนดเป็นแบบ None

                GoogleMap.MAP_TYPE_NORMAL : กำหนดเป็นแบบ Normal

                GoogleMap.MAP_TYPE_SATELLITE: กำหนดเป็นแบบ Satellite

                GoogleMap.MAP_TYPE_TERRAIN : กำหนดเป็นแบบ Terrain

                GoogleMap.MAP_TYPE_HYBRID : กำหนดเป็นแบบ Hybrid

        ทีนี้ก็มาดูตัวอย่างของบทความนี้กันต่อเลยละกันนะ สำหรับใครที่ยังไม่ได้ติดตั้ง Library ของ Google Maps ให้ไปดู [Android Code] การใช้งาน Google Map Android API v2

Main.java

        1. เจ้าของบล็อกประกาศ mMap ไว้ข้างนอก onCreate เลย เพราะว่าจะเรียกใช้ mMap ใน Listener ของ Button อีกที เลยประกาศไว้ข้างนอกเพื่อให้ mMap เรียกใช้จาก Listener ได้

        2. กำหนดค่าให้กับ mMap โดยกำหนดให้เป็น R.id.map ที่สร้างไว้ใน Layout ผู้ที่หลงเข้ามาอ่านคนไหนที่จะเปลี่ยนชื่อ id อื่นก็แก้แค่ R.id.map ให้ตรง

        3. ประกาศ Button อันนี้เอาไว้กดปุ่มแล้วเปลี่ยนรูปแบบการแสดงพื้นผิว

        4. สร้าง Listener ให้กับ Button (จะทำงานก็ต่อเมื่อผู้ใช้กดปุ่มนั้นๆ)

        5. เมื่อผู้ใช้กดปุ่ม ก็จะทำการกำหนดรูปแบบของพื้นผิวแผนที่


        สำหรับคำสั่งเจ้าของบล็อกอธิบายแค่บางส่วน เพราะว่าเหมือนกันทั้งหมด ต่างกันแค่ว่า Button แต่ละอันมีไว้สำหรับเปลี่ยนเป็นพื้นผิวคนละแบบกัน

        Main.java

package app.akexorcist.googlemapsv2view;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class Main extends FragmentActivity {
    GoogleMap mMap;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mMap = ((SupportMapFragment)getSupportFragmentManager()
                .findFragmentById(R.id.map)).getMap();
        
        Button buttonNone = (Button)findViewById(R.id.buttonNone);
        buttonNone.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                mMap.setMapType(GoogleMap.MAP_TYPE_NONE);
            }
        });
        
        Button buttonNormal = (Button)findViewById(R.id.buttonNormal);
        buttonNormal.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
            }
        });
        
        Button buttonSatellite = (Button)findViewById(R.id.buttonSatellite);
        buttonSatellite.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
            }
        });
        
        Button buttonTerrain = (Button)findViewById(R.id.buttonTerrain);
        buttonTerrain.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
            }
        });
        
        Button buttonHybrid = (Button)findViewById(R.id.buttonHybrid);
        buttonHybrid.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
            }
        });        
    }
}

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" >

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.SupportMapFragment" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <Button
            android:id="@+id/buttonNone"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:text="None" />

        <Button
            android:id="@+id/buttonNormal"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:text="Normal" />

        <Button
            android:id="@+id/buttonSatellite"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:text="Satellite" />

        <Button
            android:id="@+id/buttonTerrain"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:text="Terrain" />

        <Button
            android:id="@+id/buttonHybrid"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:text="Hybrid" />

    </LinearLayout>
</RelativeLayout>

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app.akexorcist.googlemapsv2view"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />
    
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      
    <uses-feature 
        android:glEsVersion="0x00020000" 
        android:required="true" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="app.akexorcist.googlemapsv2view.Main"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data
           android:name="com.google.android.maps.v2.API_KEY"
           android:value="your_api_key"/>

        <meta-data
           android:name="com.google.android.gms.version"
           android:value="@integer/google_play_services_version"/>
    </application>
</manifest>

พอลองทดสอบแอปพลิเคชัน ก็ให้ลองกดปุ่มต่างๆ แล้วสังเกตดูว่าพื้นผิวของแผนที่เปลี่ยนไปยังไงบ้าง