Google Maps Platform ช่วยให้ลูกค้าพัฒนาประสบการณ์การใช้งานที่ไม่เหมือนใครได้ด้วยการปรับแต่งการออกแบบภาพของเครื่องหมายบนแผนที่โดยใช้เครื่องหมายขั้นสูง ในเอกสารนี้ เราจะสำรวจวิธีที่ลูกค้าสามารถก้าวไปอีกขั้นและสร้างตัวทำเครื่องหมายที่เปลี่ยนแปลงแบบไดนามิกตามข้อมูลแบบเรียลไทม์
เครื่องหมายบนแผนที่เป็นเครื่องมือที่มีประโยชน์ในการมอบประสบการณ์การทำแผนที่ที่สมบูรณ์ให้แก่ผู้ใช้ แอตทริบิวต์ของเครื่องหมาย เช่น ขนาด สี และรูปร่าง สามารถสื่อถึงข้อมูลเพิ่มเติมเกี่ยวกับแต่ละตำแหน่งที่ทำเครื่องหมาย ในบางกรณี ข้อมูลเพิ่มเติมนี้อาจมีการเปลี่ยนแปลงแบบไดนามิก และนักพัฒนาซอฟต์แวร์อาจต้องการให้แสดงข้อมูลภาพแผนที่อัปเดต เพื่อให้ผู้ใช้รู้สึกถึงความใหม่
ในบทความนี้ เราใช้ตัวอย่างเพื่อการอธิบาย เช่น เครือร้านค้าปลีกต้องการใช้แผนที่เพื่อแสดงเวลารอของร้านค้าแก่ผู้ใช้ อย่างไรก็ตาม สถาปัตยกรรมเดียวกันนี้สามารถใช้ได้กับ Use Case อื่นๆ อีกมากมาย ลองดูแนวคิดเพิ่มเติมต่อไปนี้
- ห้องว่างของโรงแรม: บนแผนที่แสดงผลการค้นหาโรงแรม ความใหม่ของห้องว่างเป็นสัญญาณสำคัญที่จะกระตุ้นให้ผู้ใช้จองโรงแรมเมื่อจำนวนห้องว่างลดลง
- ความพร้อมให้บริการของพื้นที่จอดรถ: บนแผนที่ของลานจอดรถ ให้ความมั่นใจแก่ผู้ใช้ในการเลือกปลายทางที่จะมีพื้นที่สำหรับทางเข้า
- ร้านอาหารเปิด ปิดทำการเร็วๆ นี้ และปิดทำการ: ในแผนที่ที่แสดงผลการค้นหาร้านอาหารนั้น ผู้ใช้ต้องทราบว่าร้านอาหารอาจปิดเมื่อไปถึง
โซลูชันเครื่องหมายขั้นสูงแบบไดนามิก
มาดูวิธีสร้างแผนที่โดยใช้เครื่องหมายขั้นสูงเพื่อแสดงข้อมูลแบบไดนามิกกัน ดังที่กล่าวไว้ก่อนหน้านี้ กรณีการใช้งานคือเครือร้านค้าปลีกที่ใช้ประโยชน์จากระบบการจัดการคิวชำระเงินเพื่อประเมินและแสดงภาพเวลารอของผู้ใช้ นี่คือสถาปัตยกรรมของแอปพลิเคชัน:
ขั้นตอนที่ 1 - ระบุแอตทริบิวต์เพื่อกำหนดประสบการณ์การใช้งานภาพ
ขั้นตอนแรกคือการกำหนดพร็อพเพอร์ตี้สถานที่ตั้งอย่างน้อย 1 รายการที่จะแสดงต่อผู้ใช้ ในกรณีนี้ เราต้องการแสดงที่พักเพียงแห่งเดียว นั่นคือเวลารอในปัจจุบันของสถานที่ตั้งร้านค้าแต่ละแห่ง ซึ่งวัดเป็นนาที
ขั้นต่อไปคือการเลือกแอตทริบิวต์ของเครื่องหมายที่เกี่ยวข้องอย่างน้อยหนึ่งรายการ เพื่อแสดงคำอธิบายประกอบเวลารอบนเครื่องหมายบนแผนที่เป็นภาพ รายการแอตทริบิวต์ของเครื่องหมายจะพร้อมใช้งานในข้อมูลจำเพาะของ PinElement นอกจากนี้ คุณยังใช้ HTML ที่กำหนดเองสำหรับตัวเลือกการปรับแต่งที่สมบูรณ์ยิ่งขึ้นได้อีกด้วย
ในตัวอย่างนี้ เราจะใช้แอตทริบิวต์เครื่องหมาย 2 รายการเพื่อแสดงภาพข้อมูลเวลารอ ดังนี้
- สีมาร์กเกอร์: สีน้ำเงินสำหรับเวลารอไม่ถึง 5 นาที สีเหลืองนานกว่า 5 นาที
- เนื้อหาของมาร์กเกอร์ (ต้องมีเครื่องหมาย HTML ที่กำหนดเอง): เราจะระบุเวลารอปัจจุบันเป็นนาทีในตัวทำเครื่องหมายเอง
ขั้นตอนที่ 2 - กำหนดค่าการเชื่อมต่อกับแหล่งข้อมูลแบบเรียลไทม์
การเชื่อมต่อกับแหล่งข้อมูลทำได้หลายวิธี และโซลูชันที่เหมาะสมก็ขึ้นอยู่กับกรณีการใช้งานและโครงสร้างพื้นฐานทางเทคนิคของคุณ ในตัวอย่างนี้ เราใช้วิธีการพุล ซึ่งจะขอข้อมูลเวลารอที่อัปเดตผ่านคําขอ HTTP (REST) เป็นประจำ ในส่วนต่อไปนี้ คุณจะเห็นสถาปัตยกรรมทางเลือกที่ใช้ประโยชน์จากวิธีการพุช
สถาปัตยกรรมของเราใช้ประโยชน์จาก Cloud Functions for Firebase เพื่อให้แอปพลิเคชันเข้าถึงข้อมูลเวลารอจากเซิร์ฟเวอร์ของเรา Cloud Functions ช่วยให้เรากำหนดฟังก์ชันแบ็กเอนด์เพื่อเข้าถึงและคำนวณข้อมูลนี้ได้ นอกจากนี้ เรายังรวมไลบรารี Firebase ไว้ในเว็บแอปพลิเคชันของเราด้วย ซึ่งทำให้เราเข้าถึง Cloud Function ผ่านคำขอ HTTP ได้
ขั้นตอนถัดไปคือ หมั่นอัปเดตข้อมูลสำหรับผู้ใช้อยู่เสมอ ในการดำเนินการดังกล่าว เราได้ตั้งตัวจับเวลาโดยใช้ฟังก์ชัน setInterval
ของ JavaScript โดยหมดเวลา 30 วินาที ทุกครั้งที่มีการเรียกใช้ตัวจับเวลา เราจะขอข้อมูลเวลารอที่อัปเดตตามที่อธิบายไว้ข้างต้น เมื่อเราได้รับข้อมูลใหม่ เราต้องรีเฟรชลักษณะของเครื่องหมายบนแผนที่ ขั้นตอนถัดไปจะแสดงรายละเอียดวิธีทำการเปลี่ยนแปลงดังกล่าว
ขั้นตอนที่ 3 - แสดงผลเครื่องหมายบนแผนที่
ตอนนี้เราสามารถใช้เครื่องหมายขั้นสูงเพื่อแสดงเครื่องหมายที่ทำสไตไลซ์บนแผนที่ เครื่องหมายขั้นสูงสามารถแสดงบนแผนที่ที่สร้างโดย Maps JavaScript API ของ Google Maps Platform เมื่อใช้เครื่องหมายขั้นสูง อย่าลืมใส่พารามิเตอร์รหัสแผนที่ในคำขอแผนที่ JS
ในข้อมูลโค้ดที่แสดงด้านล่าง เราจะสร้างตัวทำเครื่องหมายและกำหนดเนื้อหาของเครื่องหมายโดยการสร้างองค์ประกอบ div ของ HTML ดังนี้
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
ขั้นตอนสุดท้ายคือการอัปเดตข้อความของตัวทำเครื่องหมายและการจัดรูปแบบ CSS ของร้านค้าแต่ละแห่ง โค้ดด้านล่างจะอ่านข้อมูลเวลารอที่อัปเดต และกำหนดการจัดรูปแบบให้กับ PIN ของร้านค้าแต่ละแห่งตามเวลารอ
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
ในตอนนี้แผนที่ใช้ API เวลารอที่มีอยู่ของเราเพื่อแสดงเวลารอล่าสุดสำหรับผู้ใช้:
วิธีอื่นๆ ในการเชื่อมต่อกับแหล่งข้อมูลแบบเรียลไทม์
การเชื่อมต่อกับแหล่งข้อมูลแบบเรียลไทม์ทําได้หลายวิธี ด้านล่างนี้ เราจะพิจารณาตัวเลือก 2 ตัวเลือก ได้แก่ Firebase Cloud Messaging และ Websockets ไม่ว่าคุณจะเลือกวิธีใด อย่าลืมพิจารณาปัจจัยด้านล่างนี้เพื่อให้เครื่องมือแผนที่ของคุณมีประสิทธิภาพดังเดิม
- ความถี่ในการอัปเดต
- ปริมาณข้อมูล
- จำนวนเครื่องหมายในมุมมองแผนที่
- ความสามารถของฮาร์ดแวร์และเบราว์เซอร์
Firebase Cloud Messaging
Firebase Cloud Messaging เป็นวิธีพุช การใช้วิธีนี้หมายความว่าคุณจะส่งการอัปเดตไปยังแอปพลิเคชันแผนที่ทุกครั้งที่มีการอัปเดตข้อมูลเวลารอในแบ็กเอนด์ ข้อความการอัปเดตจะทริกเกอร์ฟังก์ชันเรียกกลับซึ่งมีจุดประสงค์เพื่ออัปเดตลักษณะที่ปรากฏของเครื่องหมายและเนื้อหา
สิ่งหนึ่งที่ต้องพิจารณาก่อนที่จะเลือกสถาปัตยกรรมนี้คือ ต้องมีการรักษาการเชื่อมต่อกับเซิร์ฟเวอร์แบบถาวรสำหรับแต่ละเบราว์เซอร์ที่เรียกใช้แอปพลิเคชันแผนที่ ด้วยเหตุนี้ การดำเนินการดังกล่าวจึงอาจมีค่าใช้จ่ายสูงกว่า และอาจมีประสิทธิภาพลดลงในบริบทของปัญหาด้านการเชื่อมต่อ
WebSockets
WebSockets เป็นอีกวิธีหนึ่งที่ใช้วิธีพุชในการอัปเดตข้อมูลใหม่ๆ ในทำนองเดียวกับสถานการณ์ก่อนหน้านี้ คุณสามารถใช้ WebSockets เพื่อสร้างการเชื่อมต่อถาวรระหว่างแบ็กเอนด์และแอปพลิเคชันแผนที่ได้ ประโยชน์ด้านฟังก์ชันการทำงานของวิธีการนี้มีลักษณะคล้ายกับ Firebase Cloud Messaging แต่อาจมีการดำเนินการเพิ่มเติมเพื่อกำหนดค่าโครงสร้างพื้นฐานที่จำเป็น
บทสรุป
นักพัฒนาซอฟต์แวร์สามารถรวมแหล่งข้อมูลแบบเรียลไทม์เข้ากับเครื่องหมายขั้นสูงเพื่อสร้างการแสดงภาพที่เข้าใจง่ายใน Google Maps การเชื่อมต่อแหล่งข้อมูลเหล่านี้ทำได้หลายวิธีโดยขึ้นอยู่กับข้อกำหนดของแผนที่ ฮาร์ดแวร์และเบราว์เซอร์ของผู้ใช้ และปริมาณข้อมูล จากนั้นจะนำข้อมูลที่ได้มาผสานรวมมาใช้ในการควบคุมรูปลักษณ์ของเครื่องหมายขั้นสูงในแบบเรียลไทม์ ทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานแบบไดนามิก
การดำเนินการถัดไป
อ่านเพิ่มเติม:
- เครื่องหมายขั้นสูง - ศูนย์นักพัฒนาแอปของ Google
- สร้างเครื่องหมายด้วย HTML ที่กำหนดเอง
- ฟังก์ชันระบบคลาวด์สำหรับ Firebase
- Firebase Cloud Messaging
ผู้ร่วมให้ข้อมูล
ผู้เขียนหลัก:
Jim Leflar | วิศวกรโซลูชัน Google Maps Platform
John Branigan | วิศวกรลูกค้าของ Google Cloud Platform
Steve Barrett | วิศวกรโซลูชัน Google Maps Platform