Developer, Google Developers, Idea for Techology, Programming Language, Social Media Marketing, The Thinker

การใช้งาน Google Street View API วางวัตถุพ่วงในแผนที่

VN:F [1.9.22_1171]
VN:F [1.9.22_1171]

บทความนี้จะเป็นการพัฒนาโปรแกรมร่วมกับ Google Street View API โดยนำหมุดพิกัดที่เราพบกันบ่อยใน Google Maps ไปลอยเหนือ Google Street View ครับซึ่งหลักการนั้นจะไม่ยากเหมือนที่เคยเขียนอธิบายไว้ในบทความก่อนๆ นะครับ เพราะหลายคนนำ Source Code ไปใช้แต่แทบไม่ได้ศึกษาเลยว่ามันแก้ไขตรงไหน ก็มักจะอีเมลมาถามขั้นตอน โดยไม่ได้ทดลองแก้ปัญหาอะไรเลย พอมองไปที่ต้นเหตุก็ทำให้ทราบว่า พื้นฐานที่จะเข้าศึกษาการทำงานของ API นั้นหลายๆ คนไม่เข้าไปอ่านเลย เยี่ยมมากครับ! อยากเก่งอย่ากระโดดครับต้องค่อยๆ เดิน ค่อยๆ วิ่ง แล้วค่อยกระโดด แล้วจะรู้จริงอะไรจริงไปเองครับ อ่ะกลับมาที่บทความนี้ก่อนดีกว่าครับการนำ Google Street View API มาพัฒนาโดย รอบนี้จะเอาพิกัดที่เราปักหมุดบน Google Maps ให้มาลอยบน Street View ครับ เริ่มกันเลย

ทำการขอ API Key ที่ APIs console

ทำการขอ API Key ที่ APIs console

ขั้นตอนแรกให้เข้าไปที่ Google Developer ครับที่ URL นี้ https://code.google.com/apis/console เพื่อไปเปิดสิทธิการใช้งานที่ APIs console ครับ
ทำการเลือกเมนู Services ที่ด้านซ้ายมือ เลือก Activate ตัว API ที่ชื่อว่า Google Maps API v3 ครับ หลังจากนั้นให้ทำการหาค่า API Access โดยคลิกที่เมนูด้านซ้ายเราจะได้ค่า API Access มาครับ เป็น API Key

สร้าง App ขึ้นมาก่อนถ้ายังไม่เคยสร้างนะครับ

สร้าง App ขึ้นมาก่อนถ้ายังไม่เคยสร้างนะครับ

นำค่า API Keys มาใช้ครับ

นำค่า API Keys มาใช้ครับ

ต่อมาให้สร้างไฟล์ HTML ขึ้นมาครับตาม Template ด้านล่างนี้

สังเกตุว่าที่ DOCTYPE ของเอกสาร HTML ตัวนี้จะเป็น HTML5 นะครับเพราะมีการประกาศด้วย รูปแบบ

จุดสังเกตอีกส่วนคือ ส่วนของ Javascripts ครับที่มีการเรียก Service จาก Google Maps API ที่แทรกบน HEAD Tag ของเอกสาร HTML ซึ่งทำให้ทราบได้เลยว่าถ้าโครงงานที่พัฒนานี้ไม่สามารถเชื่อมต่ออินเทอร์เน็ตได้ ก็คือแสดงผลไม่ได้ครับ

ส่วนของการแสดงผลของ แผนที่บนหน้า HTML นั้นอยู่ที่

ซึ่งจะมีค่า Latitude และ Longitude หรือพิกัดตำแหน่งของเราอยู่ที่

โดยมีจุดของ Internet Access และ Cellsite ของเราเป็นตัวตั้งครับ สังเกตอีกนิดจะเห็นว่า จำนวนของการ Zoom นั้นผมตั้งไว้ที่ 8 ตรงบรรทัดที่เขียนว่า

ประเภทของ แผนที่ที่ต้องการจะนำมาแสดงใน HTML ของเรานั้นสามารถกำหนดได้ครับที่บรรทัด

ซึ่งเราสามารถเปลี่ยนตำแหน่งได้ในค่าของ ROADMAP ได้เป็น

  • ROADMAP ก็คือมุมมองของแผนที่ปรกติที่แสดงผลในรูปแบบ 2 มิติที่เราเห็นประจำใน Google Maps.
  • SATELLITE ตัวนี้จะแสดงผลเป็นรูปแบบของดาวเทียมครับเป็นภาพจริง
  • HYBRID เป็นภาพจากดาวเทียม แต่มี Layer หรือชั้นข้อมูลของถนน และสถานที่ประปนกันอยู่
  • TERRAIN อันนี้โหดหน่อย Rander นานมากๆ อยากรู้ว่าเป็นยังไง ลองทดสอบดูเองครับ เห็นหมดทั้ง น้ำ ดิน คนเลย

เอาล่ะลองแก้ Code กันดูไปก่อน ถ้าพอใจแล้วมาเริ่มขั้นตอนต่อไปครับ
ให้เข้าไปแก้ไขไฟล์ HTML ตัวเดิมที่ผมให้ Copy Template ไปโดยแทรกชุด Code รูปแบบข้างล่างเข้าไปแทนชุด Code ตัวเดิมครับ

แทรกลงไปก่อนปิด Tag Body ครับ หรือถ้าหากไม่เคลียร์ให้เข้าไปดาวน์โหลดไฟล์ตัวอย่างนี้ได้ครับ
API Overlays Image with Google Street View API (Version 1.0.0)
อธิบายเล็กน้อยนะครับ

คือตำแหน่งพิกัดที่ผมใช้เป็นจุดเริ่มต้นสามารถไปหาได้โดยการเข้าไปที่ Google Maps หาตำแหน่งของเราคลิกขวาแล้วเลือก What’s Here ครับ

หาพิกัดของเราในปัจจุบัน

หาพิกัดของเราในปัจจุบัน

ตามด้วยค่า ต่อๆ มาผมไปหาพิกัดตัวอย่างมาใส่ให้ครับ

ซึ่งแกะทีละตัวนะครับ แค่ตัวอย่างหนึ่งคือ

คือตำแหน่งของ Starbuck Coffee ที่ตึก Q House ผมก็จะใช้ฟังก์ชันในการเรียกคือ

ส่วนวิธีการหา Latitude และ Longtitude นั้นไปอ่านได้ที่บทความนี้ครับ “พัฒนา Facebook Open Graph API ตอนที่ 3 เรียกดู Place บน Mobile”
ตามรูปแบบเพื่อให้ตำแหน่งดังกล่าวปรากฏขึ้นบน แผนที่ที่ผมสร้าง สังเกตที่บรรทัด

ผมใช้ API เสริมอีกตัวของ Google Chart มาช่วยในเรื่องของไอคอน Infographics ครับจะแทนด้วยรูปอื่นก็ได้ให้ใส่ Path รูปภาพของคุณได้เลย

ทดสอบดูครับ จะเห็นว่ามุมมองแผนที่นั้นทำงานได้แล้ว มีสถานที่ต่างๆ ที่ผมใส่ลงไปปรากฏขึ้นมาด้วย

รูปแบบของพิกัดปรากฏขึ้นแล้ว

รูปแบบของพิกัดปรากฏขึ้นแล้ว

ลอง Roll Over ดูเพื่ออ่านว่ามันคือสถานที่ไหน

ลอง Roll Over ดูเพื่ออ่านว่ามันคือสถานที่ไหน

ทดสอบมุมมองของ Google Street View อีกครั้งจะพบว่า หมุดพิกัดที่ผมเรียกมาปักไว้นั้นจะปรากฏบนหน้า Street View ด้วยพอดีอาจจะเล็กไปหน่อย

พิกัดของป้ายรถเมล์ที่ใส่ลงไปในตัวอย่าง

พิกัดของป้ายรถเมล์ที่ใส่ลงไปในตัวอย่าง

พิกัดร้านกาแฟครับ

พิกัดร้านกาแฟครับ

แต่ถ้าใครที่ลองแนบไฟล์รูปภาพอื่นเข้าไปอาจจะดูสวยงามกว่านี้ครับ ยังไงลองทดสอบ Demo ของโครงงานนี้ได้ที่นี่ครับ

http://www.daydev.com/demo/mapsoverlay/

ส่วน Source Code สามารถดาวน์โหลดได้ทีนี่ครับ API Overlays Image with Google Street View API (Version 1.0.0)

About Banyapon Poolsawasd:
เว็บมาสเตอร์ที่มีบทบาทต่อไปนี้ Founder, ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, Sr. Search Engine Specialist บริษัท Adways Labs Thailand Co., Ltd. สามีวัยกลางคนผู้บ้างาน แต่ก็มีเวลาให้ภรรยา และครอบครัว อาจารย์พิเศษ มหาวิทยาลัย ประจำคณะ วิทยาศาสตร์ ไอที และ บริหารการตลาด "ความรู้มีไว้แบ่ง เหมือนเหาที่มีไว้กระจาย"
Website:http://www.daydev.com
Jabber:daydevthailand@gmail.com
การใช้งาน Google Street View API วางวัตถุพ่วงในแผนที่, 10.0 out of 10 based on 1 rating

Comments

comments

About Banyapon Poolsawasd

เว็บมาสเตอร์ที่มีบทบาทต่อไปนี้ Founder, ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, Sr. Search Engine Specialist บริษัท Adways Labs Thailand Co., Ltd. สามีวัยกลางคนผู้บ้างาน แต่ก็มีเวลาให้ภรรยา และครอบครัว อาจารย์พิเศษ มหาวิทยาลัย ประจำคณะ วิทยาศาสตร์ ไอที และ บริหารการตลาด "ความรู้มีไว้แบ่ง เหมือนเหาที่มีไว้กระจาย"No information is provided by the author.

2 Comments

  1. Natty Thanyarat P

    Thk>,,<

    VA:F [1.9.22_1171]
    VA:F [1.9.22_1171]

Leave a Reply