Jir4yu.me

ความรู้สึก.. ที่ตอนไหนๆก็(ไม่)เหมือนกัน

เรียกใช้ Google Maps API

Javascript API v3

Google Maps นั้นดูเหมือนจะมีความจำเป็นมากขึ้นทุกวันในเว็บไซต์เชิงธุรกิจ เพราะสามารถตอบโจทย์การใช้งานทั่วไปของบริษัทได้ อีกทั้งลูกค้าส่วนมากยังคุ้นเคยกับประสบการณ์ผู้ใช้ ที่คนส่วนใหญ่นิยมเรียกแอพขึ้นมาใช้เมื่อเวลา “หาเส้นทางไปไหนไม่เจออีกด้วย” โดยทั่วไปแล้วเรามักจะนำ Google Maps มาใช้กับอะไรง่ายๆที่ไม่ซับซ้อนมากบนเว็บไซต์ เช่น เอาแผนที่บริษัทมาวางไว้ หรือทำเป็น street view ไว้เฉยๆ

บทความนี้จึงนำความสามารถอย่างอื่นที่ผู้เขียนเคยใช้งานผ่านๆมาบ้างกับงานระบบทั่วๆไป เช่น การปักหมุดสถานที่ ที่เราต้องการจะหมุดลงไปเท่านั้น การเรียกใช้ กล่องข้อความเมื่อมีการดำเนินเหตุการณ์บางอย่างเช่น เมื่อคลิกที่จุดใดจุดหนึ่งให้เด้งกล่องข้อความขึ้นมาแสดงรายละเอียดย่อยๆ ของสถานที่ที่หมุดนั้นไว้ หรือ ไปจนถึงการดึงเส้นทาง ณ จุดที่เราอยู่ ไปจนถึงปลายทางโดยบอกข้อมูลการดำเนิน อย่าง เลี้ยวซ้ายแยกหน้า, ตรงไป 500 เมตร หรือ กลับรถข้างหน้า เป็นต้น และ เราเองยังสามารถตกแต่งให้สวยงามเข้ากับงานที่เรารับมาได้อีกด้วย

chememan Google Maps API
chememan Google Maps API
TMB - Custom Direction Icon
TMB – Custom Direction Icon

วิธีการเรียกใช้งานสำหรับ platform บนเว็บไซต์นั้นไม่ได้ยุ่งยาก และ ซับซ้อนอะไรเลย เพียงแค่เราไปสมัคร Google API Console ให้เรียบร้อยเสียก่อน จากนั้นก็เข้าไปเปิดใช้บริการ Google Maps API เพียงเท่านี้ก็สามารถนำแผนที่มาใช้งานบนเว็บไซต์ของเราได้เลย

Enable Google Maps API
Enable Google Maps API

ทั้งนี้เราสามารถใช้งาน Google Maps API ได้ฟรี แต่มีข้อแม้อยู่ว่าต้องมีการเรียกใช้งานไม่เกินกว่า 25,000 ครั้ง / วัน หากเราต้องการใช้งานเกินกว่านั้น หรือ กลัวว่าที่มีอยู่ 25,000 จะไม่พอก็สามารถ addon เพิ่มได้ โดยมีค่าใช้จ่ายอยู่ที่ 0.5$ ต่อ 1000 views ที่ถูกเพิ่มเข้ามา

Google Maps API Quota

Google Maps API Pricing

หมายเหตุ: เวอร์ชั่นล่าสุดของ Google Maps API ที่เราเรียกใช้งานคือเวอร์ชั่นที่ 3 (ณ วันที่เขียน 25/12/13)

สำหรับการเริ่มต้นใช้งานบน platform เว็บไซต์ เราสามารถเข้าไปอ่านศึกษาเพิ่มเติมในส่วนดังกล่าวได้ที่เว็บ Google Maps JavaScript API v3 เอง โดยคู่มือที่ปรากฏอยู่หน้าเว็บไซต์ก็ถือได้ว่ามีความละเอียดทำตามได้ทุกขั้นตอน

Jirayu Limjinda

ถ้าไม่รู้จักกัน บางทีคุณอาจจะไม่เข้าใจกับสิ่งที่ผมทำ.. กลับกัน ถ้าคุณรู้จักผมดี คุณจะไม่ต้องเอ่ยปากถามเลยว่าทำไม

แสดงความคิดเห็นของคุณที่นี่

loading, please wait..

loading, please wait..