13 มกราคม 2556

[Android Code] การสร้าง Marker ลงบน Google Maps Android API v2


* Google Maps Android API v2 ไม่สามารถรันทดสอบบน AVD ได้ *


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


สำหรับการติดตั้งเบื้องต้นเพื่อจะใช้งาน API v2 ให้อ่านที่

สำหรับการปัก Marker ลงบนแผนที่ จะใช้คำสั่ง addMarker
GoogleMap mMap = ((SupportMapFragment)getSupportFragmentManager() .findFragmentById(R.id.map)).getMap(); mMap.addMarker(new MarkerOptions().position( new LatLng(13.669605, 100.610077)));

พอลองทดสอบดูก็จะพบว่ามี Marker ปักอยู่บนพิกัดดังกล่าว



และถ้าต้องการเพิ่มข้อความลงไปใน Marker ด้วย ก็ใช้คำสั่ง
mMap.addMarker(new MarkerOptions().position( new LatLng(13.76488, 100.538334)).title("TITLE"));

และถ้าต้องการเพิ่มข้อความย่อย (Snippet) เข้าไปด้วย ก็ใช้คำสั่ง
mMap.addMarker(new MarkerOptions().position( new LatLng(13.76488, 100.538334)) .title("TITLE") .snippet("SNIPPET"));

พอลองทดสอบดู ให้กดเลือกที่ Marker ก็จะมีข้อความแสดงตามที่กำหนด



ทีนี้ก็มาลองดูคำสั่งตัวอย่างของบทความนี้เลยละกันนะ

Main.java



1. ประกาศ mMap จากคลาส GoogleMap แล้วกำหนดค่าเป็น R.id.map ที่สร้างไว้ใน Layout

2. ปัก Marker ที่พิกัด 13.76488, 100.538334 โดยกำหนดข้อความที่หัว Marker ว่า
"Victory Monument" และกำหนดข้อความย่อยว่า "อนุเสาวรีย์ชัยสมรภูมิ"

3. ปัก Marker ที่พิกัด 13.669605, 100.610077 และกำหนดข้อความว่า BITEC

4. ปัก Marker ที่พิกัด 13.745653, 100.534402 และกำหนดข้อความว่า Siam BTS

5. กำหนดให้แผนที่เลื่อนไปยังพิกัด 13.76488, 100.538334 แล้วซูมที่ระดับ 14


สำหรับพิกัดบนแผนที่ ผู้ที่หลงเข้ามาอ่านสามารถใช้ Coordinate Finder
ในการช่วยหาพิกัดได้นะ เปิดแอพขึ้นมาแล้วจิ้มเลือกที่ที่ต้องการเลย
สามารถดาวน์โหลดได้จาก Coordinate Finder [Play Store]



Main.java
package app.akexorcist.googlemapsv2marker;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Window;

public class Main extends FragmentActivity {    
    public void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
                
        GoogleMap mMap = ((SupportMapFragment)getSupportFragmentManager()
                .findFragmentById(R.id.map)).getMap();
        
        mMap.addMarker(new MarkerOptions().position(
                new LatLng(13.76488, 100.538334))
                .title("Victory Monument")
                .snippet("อนุสาวรีย์ชัยสมรภูมิ"));
        mMap.addMarker(new MarkerOptions().position(
                new LatLng(13.669605, 100.610077))
                .title("BITEC"));
        mMap.addMarker(new MarkerOptions().position(
                new LatLng(13.745653, 100.534402))
                .title("Siam BTS"));
                
        mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(
                new LatLng(13.76488, 100.538334), 14));            
    }
}

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

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="app.akexorcist.googlemapsv2marker"
    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=
        "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-permission android:name=
        "app.akexorcist.googlemapsv2marker.permission.MAPS_RECEIVE"/>
      
    <permission 
        android:name="app.akexorcist.googlemapsv2marker.permission.MAPS_RECEIVE"
        android:protectionLevel="signature"/>
    
    <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.googlemapsv2marker.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"/>
    </application>
</manifest>

พอลองทดสอบดู แผนที่ก็จะเลื่อนและซูมไปที่อนุเสาวรีย์ชัยสมรภูมิ
โดยจะมี Marker อยู่สามจุดคืออนุเสาวรีย์ฯ ไบเทคบางนา และ BTS สยาม
พอกดที่ Marker ก็จะแสดงข้อความขึ้นมา ส่วนอนุเสาวรีย์ฯจะมี Snippet ด้วย




สำหรับผู้ที่หลงเข้ามาอ่านคนใดที่ต้องการไฟล์ตัวย่าง
สามารถดาวน์โหลดได้จาก Google Maps V2 Marker

เมื่อดาวน์โหลดตัวอย่างไป Import แล้วให้ตรวจสอบตามนี้
• ใส่ API Key ที่ไปขอจาก Google API ลงใน AndroidManifest.xml
• เลือก Library ของ google-play-services_lib ให้ตรงกับเครื่อง

อาจจะมีปัญหาพอสมควรสำหรับผู้ที่ดาวน์โหลดไปทดสอบ
เพราะว่าการใช้ Google Maps นี้มีการขอ API Key และ Library
ดังนั้นจึงควรตรวจสอบให้แน่ใจว่าได้กำหนดไว้ถูกต้องแล้ว 
และก็อย่าลืมว่าทดสอบบน AVD หรือ Emulator ไม่ได้นะ
เพราะต้องมี Play Store ซึ่ง AVD ไม่มี ทำให้แอป Force Close




เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium