คราวนี้เราลองมาจับ Google Map API เรียกทำงานร่วมกับ Google Street View ให้สามารถดึงภาพจากเว็บไซต์ และข้อความมาปรากฏบบนหน้าแผนที่ ของ Google Street View กันแบบง่ายๆกันดีกว่าครับ
พอดีว่าลองเข้าศึกษาเพลินๆ ก็เลยได้ ชุด Source Code Library ของ Google Street view มาจากเว็บไซต์
https://developers.google.com/maps/documentation/javascript/
และได้อ่าน และลองเล่นดูก็รู้สึกว่าไม่ง่ายครับ มาลองดูกันเลยดีกว่า ซึ่งตัว Source Code ที่ผมจะให้ดาวน์โหลดนี้สามารถใช้งานง่ายแต่เป็น API Key ของผมดังนั้นถ้าจะใช้ API Key ของตัวเองต้องไปสมัครก่อนที่ Google Code ครับ ไปค้นหาวิธีีสมัครกันเองนะ, ส่วนวิธีการแก้ไข Source Code หลังดาวน์โหลดไฟล์ไปแล้ว สามารถสอบถามได้ที่อีเมล์ [email protected] หรือ Comment Facebook ด้านล่างได้เลยครับ
ก่อนอื่นดาวน์โหลดไฟล์ Source Code ก่อนที่นี่ครับ
Image on Map -Google Street View API (Version 1.0.0)
ทำการแตกไฟล์ออกมาแล้วแก้ไขตามนี้ครับ
ทำการเปลี่ยน API Key ครับ หลังจากนี้ก็ไปทำการ หาพิกัดของตัวจุดเริ่มต้น และ จุดที่จะให้ภาพปรากฏ โดยการเปิด Google Maps
ให้คลิกขวาที่ตำแหน่งแรกเป้นตำแหน่งของคุณก่อน ว่าจะให้เริ่มต้นที่ใด คลิกขวาแล้วจะพบคำว่า นี่คืออะไร หรือ What’s here ให้คลิก สังเกตที่แถบค้นหาตัวเลขจะกลายเป็น Lat, Lon ในภาพตัวอย่างคือพิกัด Lat=13.755785 และ Lon=100.49437 ให้นำไปใส่ตำแหน่งของคุณก่อน ที่บริเวณบรรทัดในรูป
ต่อมาทำอีกครั้งแต่เป็นตำแหน่งใหม่ที่ไม่ใช่ตำแหน่งเดิมแล้วนำ ไปแทรกใน Source Code เหมือนในรูป ซึ่งจะเป็นตำแหน่งที่เราต้องการให้ภาพ และข้อความปรากฏ
เสร็ขแล้วหา ภาพ และข้อความดีๆ มาแก้ไขใน code ซึ่งในที่นี่ผม ใช้ภาพชื่อว่า “mapsicle_marker_sm.png” ซึ่งก็คือภาพข้างล่าง
เอาล่ะทำการ Upload ไฟล์ทั้งหมดขึ้นไปบน Host หรือเว็บไซต์ของคุณ แล้วลอง Preview
ให้ลองเคลื่อนที่ จากตำแหน่งเริ่มต้นไปทางขวา เบาๆ ช้าๆ
เจอจังๆ Auto Bot อาละวาด!!!!
ถ้าคิดว่าภาพข้างบนเป็นภาพตัดต่อ งั้นลองทดสอบกันข้างล่างเลย หรือไปที่ URL
https://www.daydev.com/demo/custominfo/
กลายเป็นว่าการพัฒนาโปรแกรมกับ Google Street View นั้นไม่ได้ยากเลย ไม่แน่เด็กมัธยมยังทำได้ด้วยซ้ำไป แต่สิ่งที่จะทำให้ลูกเล่นเหล่านี้โดดเด่นนั้น ก็น่าจะเป็น จิตนาการ และการต่อยอด มากกว่าครับ
เพราะว่าแต่ละ โปรเจ็คที่ผมทำมาให้ดูเป็นตัวอย่างนี้ก็ล้วนเกิดจาก จิตนาการที่ว่า มันต้องทำได้สิ มันต้องทำได้ ดังนั้นเราก็เลยทำได้ครับ หวังว่าคงได้เอาไปใช้ประโยชน์กันนะครับ
Source Code: Image on Map -Google Street View API (Version 1.0.0)
พี่คะ เปิดโคีดไม่ได้คะ