Print
Details: Category: บทความ Flutter | Published: 02 August 2019 | Hits: 275

เป็นเนื่อหา ที่สอนอยู่ใน คอร์ส เขียน Flutter ตัวต่อตัว กับ มาสเตอร์ อึ่ง https://www.androidthai.in.th/private-project-android-flutter-course.html 

Screen Shot 2562 07 14 at 045032

 มาสเตอร์ แนะนำใช้ Library ตัวนี่ครับ google Map Flutter https://pub.dev/packages/google_maps_flutter

Screen Shot 2562 07 14 at 045109

 ไปที่ pubspack.yaml และ เพิ่ม google_map_flutter แบบนี่เข้าไปใน เทค dependency ครับ

 Screen Shot 2562 07 14 at 045654

ในคู่มือแนะนำบอกว่าให้ไปที่ AndroidMainfest.xml และ เพิ่มโค้ดพวกนี่ไป โดยวางใต้ เทค application

Screen Shot 2562 07 14 at 050242

แบบนี่ครับ แต่เรายังขาด Your Key Here

 Screen Shot 2562 07 14 at 052416

ให้ไปที่ https://console.cloud.google.com

Screen Shot 2562 07 14 at 052434

สำหรับใคร. ไม่มีโปรเจ็ค ให้สร้างโปรเจ็คก่อนนะ 

Screen Shot 2562 07 14 at 052527

 ให้เลือก Ennbled ในส่วนของ Maps SDK for Android ก่อน

Screen Shot 2562 07 14 at 052601

 สร้างคีร์

Screen Shot 2562 07 14 at 052655

 ตั้งชื่อ คีร์ และ กำหนดว่าจะเอาคีร์ ไปใช้กับงานอะไร ? ในตัวอย่างให้ใช้ Andrid Apps

Screen Shot 2562 07 14 at 052739

ต่อไป ให้เอาค่า Package Name และ SHA-1ใส่เข้าไป

Screen Shot 2562 07 14 at 052819

การหาค่า  Package ลองดูจาก https://www.androidthai.in.th/android-flutter/333-change-package-or-id-app-in-android.html

ส่วนการหา SHA-1 ลองดูที่ https://www.androidthai.in.th/android-article/52-android-connected-firebase.html มีวิธีหา SHA-1 อยู่โดยการใช้ Signing Report ครับ

 Screen Shot 2562 07 14 at 052826

เลือก Don't restrict key คลิก Save

Screen Shot 2562 07 14 at 052839

จะเห็นค่า key ของเรา

Screen Shot 2562 07 14 at 055048

เอาไปแทน Your Key Here ได้เลย

Screen Shot 2562 07 14 at 055048

 มาดูการใช้งาน บน Flutter. ให้ import package google maps flutter มาก่อน

Screen Shot 2562 07 14 at 061049

 มาสเตอร์ สร้าง ค่าคงที่ centerMap จาก ออฟเจ็ค LatLng ที่ กำหนด Lat, Lng และ สร้าง เมธอด myMap ที่ Return ค่าออกไปเป็น GoogleMap แบบนี่

Screen Shot 2562 07 14 at 061054

แล้วให้ เมธอด build เรียก myMap บน body ลองทดสอบโค้ด

Screen Shot 2562 07 14 at 060700

ไม่ยากนะครับ ลองดูครับ แต่ถ้าไม่ได้อย่างไร ? ถามมาสเตอร์ บน เฟส หรือ จะมาลองนั่งเรียนกันตัวต่อตัวที่ https://www.androidthai.in.th/android-article/52-android-connected-firebase.html ก็ยินดีต้อนรับครับ