Google Maps Android API v2 - การสร้าง Marker ลงบน Google Maps

คราวนี้ก็ต่อกันด้วยการปัก Marker ลงบนแผนที่กันต่อเลย

เป็นพื้นฐานทั่วไปของแผนที่ที่จะต้องมี Marker ปักบอกตำแหน่ง

เจ้าของบล็อกก็จะแสดงตัวอย่างการปัก Marker แบบง่ายๆ

ซึ่งสามารถทำได้ง่ายมากใน Google Maps Android API v2

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

[Android Code] การใช้งาน Google Map Android 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 ด้วย