[Android Dev] สร้างแผนที่โดยใช้ MapView with Google Maps API

ค่อนข้างจะยุ่งยากมากๆ เลยทีเดียวนะครับ สำหรับการใช้ MapView บน Android เนี่ย
เพราะว่า ในตัว Android SDK ไม่มี MapView ให้ใช้ตรงๆ ครับ
เราต้องไปใช้ผ่าน Google Maps API อีกที ...

โดยขั้นแรกต้องทำการติดตั้ง Google API for Android ซะก่อน
ให้เข้าไปที่ Android SDK Manager ครับ ถ้าเป็นเวอร์ชั่นต่ำกว่า 12.0 จะอยู่ใน Third-Party นะครับ
แต่ควรจะอัพเป็น 14.0 มันจะอยู่ตรงนี้ครับ

ตรง Google APIs by Google inc. นะครับ ในนี้จะมี Maps ให้เราใช้งานอยู่ด้วย

ตอนที่สร้าง Project ใหม่ก็ต้องเลือกเป็น Google APIs Project ด้วยนะครับ


จากนั้นให้เปิดไฟล์ AndroidManifest.xml ขึ้นมาครับ
เพิ่มส่วนนี้เข้าไปที่ Tag ของ <application> เพื่อระบุว่าเราใช้ Maps Library จาก Google


และนี่เข้าไปที่ส่วนของ <manifest> เพราะเราต้องใช้ Internet ด้วยครับ


ก็จะได้ประมาณนี้นะครับ (อย่าใส่ผิดที่นะ)


จากนั้นเปิด main.xml (User Interface File) ขึ้นมาแล้วเขียนตามนี้เลยนะครับ

ก็ไม่มีอะไร นอกจาก วาง MapView ไว้เต็มหน้าจอเลย ...
แต่มันจะมี Attributed พิเศษอยู่ 2 อันคือ
    - clickable เลือก true ถ้าอยากให้ผู้ใช้มีการกระทำอะไรต่อ Maps ของเรา หรือ false ถ้าจะโชว์เฉยๆ
    - apiKey อันนี้เราต้องไปสมัครขอใช้ Google Maps API ถึงจะได้มาครับ

พักโค้ดตรงนี้หน่อยนะครับ
อย่างที่บอกว่าเราไม่มี apiKey ฉะนั้นก็ต้องไปหามาก่อน
โดยให้เข้าไปที่นี่ --> http://code.google.com/android/maps-api-signup.html
ซึ่งในนั้นจะมีบอกว่าเราจะ Sign Up เพื่อได้มาซึ่ง apiKey อย่างไรนะครับ
แต่ผมเองใช้ Mac OS X จะขอเสนอในส่วนนี้แล้วกันครับ (Linux ก็ใช้ได้เหมือนกันนะครับ)

เปิด Terminal ขึ้นมา แล้วพิมพ์ตามนี้ครับ

มันจะให้เราใส่ Keystore Password ให้พิมพ์ว่า android ครับ
[เวลาพิมพ์มันจะไม่ขึ้นนะครับ พิมพ์เสร็จกด Enter]
ก็จะได้หน้าต่างแบบนี้ พร้อมได้ Certificate fingerprint (MD5) มาด้วย [แต่ละเครื่องไม่เหมือนกัน]

ให้เรานำ Certificate fingerprint (MD5) ไปใส่ในเว็บเมื่อสักครู่ครับ 


เราก็จะได้ API Key มาใช้งานสำหรับ Android Apps ของเราแล้วครับ

ต่อไปมาเริ่ม Coding กันเลยครับ 


import สิ่งที่ต้องใช่งานเข้ามา 
จากนั้นให้ Class ของเรา extends MapAcitvity (เดิมๆ เรา extends Activity)


ถ้าใช้ Eclipse เนี่ยมันจะฟ้องว่า เรายัง Implement method ไม่ครบ ให้เราเพิ่มนี่เข้าไปครับ
ตอนนี้เราก็สามารถรันได้แล้วนะครับ แผนที่ขึ้นแล้ว แต่ว่าเราจะยัง Pan หรือ Zoom ไม่ได้


โค้ดนี้จะช่วยให้มีเครื่องมือที่ใช้ในการ Zoom ขึ้นมา 
แค่นี้แหละครับ จริงๆ มันยุ่งยากแค่ตอน Set Up เท่านั้นแหละ



ผมขอจบ Blog นี้ไว้ตรงนี้ก่อนนะครับ... เพื่อที่มันจะได้ไม่ยาวจนเกินไป ... 
เดี๋ยว Blog หน้าเราจะมา Mark จุดที่เราต้องการตามพิกัดกันนะครับ 

Popular posts from this blog

[Android Dev] การติดตั้ง Eclipse+AndroidSDK เพื่อพัฒนาโปรแกรมบน Android

12 วิธี การบริการและดูแลลูกค้าในร้าน Starbucks

5 TED Talk ที่จะช่วยให้คุณทำงานดีขึ้น