จากบทความที่ผ่านมา ได้ทำ
การติดตั้ง Google Play Service SDK และ
การขอ API Key ไปแล้ว ต่อไปจะทำการ อิมพอร์ต Google Map มาในแอพพลิเคชั่น
ขั้นตอนแรก สร้าง
ชื่อโปรเจคให้ตรงกับค่า Android apps ในตอนที่ขอ API Key โดยที่ชื่อโปรเจคในที่นี้คือ bicydroid_v1
เมื่อสร้างโปรเจคเสร็จแล้วขั้นตอนต่อไปเราจะทำการอ้างอิง Google Play Service ที่อิมพอร์ตใน Eclipse แล้ว เข้ามาในแอพพลิเคชั่น ให้ทำการคลิกขวาที่โฟล์เดอร์โปรเจคที่เราเพิ่งสร้างขึ้นแล้วเลือก Properties
เมื่อเข้ามาที่หน้าต่าง Properties แล้ว จะเห็นแถบหัวข้อทางด้านซ้าย เลือก Android
ในหัวข้อ Android นั้น จะมีกรอบของ Project Build Target กับ Library ในที่นี้เราสนใจที่ Library ในกรอบของ Library จะมีปุ่ม Add ทางด้านขวา ทำการคลิก Add
เมื่อทำการคลิกแล้วจะปรากฎหน้าต่างของ Project Selection จะเจอ Library ที่ชื่อว่า google-play-service_lib การเลือกแล้วคลิกปุ่ม OK
เมื่อกลับมาในหน้าต่าง Properties ในกรอบ Library จะพบว่าในแถบ Reference จะมีชื่อ Library google-play-service_lib เพิ่มขึ้นมา แสดงว่าเราทำการอ้างอิงเสร็จเรียบร้อยแล้ว ก็ทำการกดปุ่ม OK
ขั้นตอนต่อไปจะเข้าไปแก้ไขไฟล์ AndroidManifest.xml โดยภายในไฟล์ AndroidManifest.xml นั้นจะเห็นสองแท็กหลักๆ คือ แท็ก Manifest กับ แท็ก Application ซึ่งเราจะเพิ่มแท็ก กำหนด meta-data กับ permission ในการขอใช้งานที่เกี่ยวข้องกับ Google map
*ทำการเพิ่มแท็กต่อไปนี้ให้อยู่ ภายในแท็ก Aplication ในการประกาศเวอร์ชั่นของ Google Play Service
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version" />
ต่อไปจะทำการแอด API Key ที่เราทำการขอใช้ GoogleMap API ก่อนหน้านี้ ในแอพพลิเคชั่นของเรา
โดยที่ MAP API จะทำการอ่านค่า API key เพื่อใช้ในการเข้าถึงเซิฟเวอร์ของ Google Map
*ทำการเพิ่มแท็กต่อไปนี้ให้อยู่ ภายในแท็ก Aplication เช่นเดียวกัน ที่สำคัญในที่นี้คือ ภายในแท็กจะมีค่าของ android:value ให้เราทำการใส่ API Key ที่เราได้มาในส่วนนี้
<meta-data android:name="com.google.android.maps.v2.API_KEY"
android:value="หมายเลข API ของคุณ" />
ที่นี้เรามาทำการกำหนด permission ที่ต้องทำการแอดให้กับแอพพลิเคชั่นที่จะใช้ Google Map Android API จะมีที่สำคัญๆอยู่ 5 แท็กด้วยกัน
*ทำการเพิ่มแท็กต่อไปนี้ให้อยู่ ภายในแท็ก Manifest
<uses-permission android:name="android.permission.INTERNET" />
แท็กนี้จะถูกใช้โดย API ในการดาวน์โหลด Map tile จาก Google Map Server
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
แท็กนี้จะอนุญาตให้ API ในการเช็คสถานะการเชื่อมต่อเพื่อใช้ในการตัดสินใจในการโหลดข้อมูล
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
แท็กนี้จะอนุญาตให้ API แคชข้อมูล map tile ไว้ภายในหน่วยความจำภายนอกของอุปกรณ์ที่ติดตั้งแอพพลิเคชั่น
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
แท็กนี้จะอนุญาตให้ API สามารถใช้ WiFi หรือ Mobile cell data หรือทั้งสองในการค้นหาที่อยู่ของอุปกรณ์
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
แท็กนี้จะอนุญาตให้ API ใช้ GPS(Global Positioning System) ในการค้นหาที่อยู่ของอุปกรณ์ที่อยู่ภายในพื้นที่เล็กๆ
Google Map Android API ต้องการใช้ OpenGL version 2 ในการแสดงแผนที่ ถ้าไม่ทำการติดตั้งแผนที่ก็จะไม่แสดง เราต้องเพิ่มอีกแท็กในการแสดงแผนที่
*ทำการเพิ่มแท็กต่อไปนี้ให้อยู่ ภายในแท็ก Manifest
<uses-feature android:glEsVersion="0x00020000"
android:required="true" />
เมื่อทำการเพิ่มแท็กทั้งหมดแล้วก็เป็นอันเสร็จสิ้นในการแก้ไขไฟล์ AndroidManifest.xml ดังรูปตัวอย่าง
ต่อไปเราจะทดสอบโดยวิธีที่ง่ายสุดคือการเพิ่ม Simple Map เข้าไปในแอพพลิเคชั่น
ขั้นตอนนี้เราจะไปเพิ่ม Fragment ที่ Layout XML File ที่อยู่ใน Folder res/layout/activity_main.xml
ทำการเปิดไฟล์ขึ้นมาแล้วทำการแก้ไขโดยการนำโค้ดต่อไปนี้ แทนที่โค้ดเดิมทั้งหมด (ถ้าสร้างโปรเจคใหม่)
<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.google.android.gms.maps.MapFragment" />
ส่วนไฟล์ MainActivity.java ไม่ต้องไปทำการแก้ไขใดๆ ถ้าทำครบตามที่ได้เขียนไว้ เมื่อรันแอพพลิเคชั่นก็จะปรากฎแผนที่เต็มหน้าจอบนอุปกรณ์ที่ทำการติดตั้ง
อัพเดท : หลังจากได้มีการตรวจพบเจอ Error ในไฟล์ MainActivity.java เนื่องจากเราทำการนำโค้ดไปแทนที่ใน activity_main.xml ทำให้ R.id.container ในไฟล์ MainActivity.java หายไป ให้ทำการลบ ส่วนนั้นทิ้งไป ดังรูปตัวอย่าง
หน้าตาของแอพพลิเคชั่น
