แม้จะมีแอปและบริการแผนที่มากมายพาไปจากจุด A ไปจุด B แต่ "ราชาแห่งแผนที่" ยังคงเป็น Google Maps ผมใช้บนคอมพิวเตอร์ แท็บเล็ต และ 90% บนสมาร์ทโฟน ข้อมูลดีที่สุด ตัวเลือกนำทางและเส้นทางมากที่สุด พร้อมฟีเจอร์โคลงๆ อย่าง Street View และข้อมูลเดินเท้า จักรยาน ขนส่งสาธารณะ
แต่ถ้าต้องใช้แผนที่หรือเส้นทางนอกเว็บไซต์ Google? สมมติมีเว็บแต่งงานหรือบล็อกส่วนตัว แขกเข้ามา พิมพ์ที่อยู่ต้นทาง ได้เส้นทางไปสถานที่จัดงานทันที!
มี 2 วิธีทำได้ วิธีง่ายที่สุด: ฝังแผนที่ด้วยโค้ด embed จาก Google Maps วิธีที่ 2: เทคนิคมากกว่า แต่ปรับแต่งและไดนามิกกว่า จะอธิบทั้ง 2 วิธี
ฝัง Google Map
ถ้าต้องการแสดงเส้นทางจากจุดหนึ่งไปอีกจุด ง่ายที่สุดคือฝังแผนที่ที่กำลังดูด้วยโค้ด embed ไปที่ Google Maps ตั้งค่าเส้นทาง แล้วคลิกไอ콘เฟืองมุมล่างขวา
คลิก Share or embed map แล้วแท็บ Embed map เลือกขนาดแผนที่ คัดลอกโค้ด iframe วางบนเว็บเพจไหนก็ได้
ข้อเสีย: ผู้ใช้เห็นแค่แผนที่นิ่ง (static) วิธีที่ 2 ด้านล่าง สร้างฟอร์มให้พิมพ์ที่อยู่ต้นทาง เอง แล้วสร้างแผนที่ไปยังปลายทางที่เรากำหนด
สร้างฟอร์ม Google Maps
เพื่อให้เห็นภาพวิธีที่ 2 ลองพิมพ์ที่อยู่ US ในกล่องด้านล่าง เพื่อได้เส้นทางจากที่คุณอยู่ไปบ้านผม:
โคลงไหม? สร้างฟอร์มเล็กๆ นี้บนเว็บไซต์ บล็อก หรือที่วาง HTML ได้ง่ายๆ เหมาะสำหรับเว็บธุรกิจขนาดเล็ก วางหน้าติดต่อ ให้ลูกค้าได้เส้นทางเร็ว แทนที่จะต้องคัดลอกที่อยู่ เปิดหน้าต่างใหม่ พิมพ์ต้นทางเอง
สร้างกล่องได้เส้นทางที่ปรับแต่งแล้วอย่างไร? หา syntax URL ที่ Google ใช้สำหรับเส้นทางก่อน ได้จากการขอเส้นทางระหว่าง 2 แล้วคัดลอก URL จาก address bar หรือคลิกไอคอนเฟืองมุมล่างขวา เลือก Share or embed map
แท็บ Share link จะมี URL เหมือนใน address bar วาง URL ทั้งหมดด้านล่างเพื่อดูโครงสร้าง
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd,+Allen,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.762484!2d33.08947!1m5!1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892
เยอะมาก! ยาวมาก! ส่วนใหญ่เข้าใจยาก! URL parameters ของ Google Maps เดิมตรงไปตรงมา แต่วันนี้ซับซ้อนมาก โชคดีที่ยังใช้พารามิเตอร์เก่าได้ Google จะแปลงเป็นรูปแบบใหม่ให้อัตโนมัติ ลองดูลิงก์ด้านล่าง
https://maps.google.com/maps?saddr=start&daddr=end
ลองใส่ที่อยู่ในเครื่องหมายคำพูดสำหรับต้นทางและปลายทาง วาง URL ในเบราว์เซอร์! ผมใส่ New Orleans เป็นต้นทาง Houston, TX เป็นปลายทาง URL ดูแบบนี้:
https://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
ใช้ได้! แต่ Google Maps แปลงลิงก์ซับซ้อนขึ้นเมื่อโหลดเสร็จ ตอนนี้เรามี URL เรียบร้อย ต่อไปสร้างฟอร์มง่าย 2 ช่อง: ช่องต้นทาง และช่องปลายทาง
ถ้าอยากให้พิมพ์ที่อยู่ตัวเอง ได้เส้นทางไปที่เรา ช่องที่ 2 ซ่อนไว้ ตั้งค่าปลายทางไว้ล่วงหน้า
<form action=”https://maps.google.com/maps” method=”get” target=”_blank”>
Enter your starting address:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>
ดูโค้ดข้างต้น บรรทัดแรก form ส่งข้อมูลไป maps.google.com/maps target=blank เปิดผลลัพธ์ในหน้าต่างใหม่ ช่อง text สำหรับต้นทาง (ว่าง) ช่องที่ 2 hidden ค่าคือปลายทางที่ต้องการ ปุ่ม submit "Get Directions" พิมพ์ที่อยู่ ได้ผลลัพธ์:
ปรับแต่งเพิ่มได้ด้วยพารามิเตอร์เพิ่ม เช่น ต้องการ default view เป็น Satellite และโชว์ Traffic
https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
สังเกต layer=t และ t=h layer=t = traffic layer t=h = hybrid map t ยังเป็น m (normal), k (satellite), p (terrain) z = zoom level 1-20 (ตัวอย่าง 7) เพิ่มเข้า URL สุดท้าย ได้ฟอร์ม Get Directions Google Maps ปรับแต่งสูงบนเว็บไซต์!
มีปัญหา คอมเมนต์บอกนะครับ ผมจะช่วย! Enjoy!
