แม้ว่าจะมีแอปและบริการการทำแผนที่มากมายที่จะพาคุณจากจุด A ไปยังจุด B ราชาแห่งแผนที่คือ Google Maps ฉันใช้คอมพิวเตอร์ แท็บเล็ต และ 90% ของเวลาทั้งหมดบนสมาร์ทโฟน มีข้อมูลที่ดีที่สุด ตัวเลือกการนำทางและเส้นทางส่วนใหญ่ และคุณลักษณะเจ๋งๆ เช่น Street View และข้อมูลการเดิน การขี่จักรยาน และระบบขนส่งสาธารณะ
แต่ถ้าคุณจำเป็นต้องใช้แผนที่หรือเส้นทางนอกเว็บไซต์ของ Google สมมติว่าคุณมีเว็บไซต์งานแต่งงานของคุณเองหรือบล็อกส่วนตัว และแขกสามารถเยี่ยมชมเว็บไซต์ของคุณ พิมพ์ที่อยู่ที่จะมาจากและขอเส้นทางไปยังสถานที่จัดงานโดยอัตโนมัติ!
มีสองวิธีที่คุณสามารถทำได้ วิธีที่ง่ายที่สุดคือเพียงฝังแผนที่ลงบนเว็บเพจของคุณโดยใช้โค้ดสำหรับฝังที่สร้างโดย Google แผนที่ วิธีที่สองนั้นใช้เทคนิคมากกว่าเล็กน้อย แต่ปรับแต่งได้และไดนามิกมากกว่า ฉันจะพูดถึงทั้งสองวิธีด้านล่าง
ฝัง Google Map
หากคุณต้องการแสดงเส้นทางจากที่หนึ่งไปยังอีกที่หนึ่งเท่านั้น วิธีที่ง่ายที่สุดคือฝังแผนที่ใดก็ตามที่คุณกำลังดูอยู่โดยใช้โค้ดสำหรับฝัง ขั้นแรก ไปข้างหน้าและตั้งค่าเส้นทางที่คุณต้องการใน Google แผนที่ จากนั้นคลิกที่ไอคอนรูปเฟืองที่ด้านล่างขวาของหน้า
คลิกที่แบ่งปันหรือฝังแผนที่ แล้วคลิกที่ ฝังแผนที่ แท็บ ที่นี่คุณสามารถเลือกขนาดสำหรับแผนที่ของคุณ จากนั้นคัดลอกโค้ด iframe แล้ววางลงบนหน้าเว็บใดๆ ที่คุณต้องการ
ข้อเสียเพียงอย่างเดียวของวิธีนี้คือผู้ใช้เพิ่งเห็นแผนที่แบบคงที่ ในวิธีที่สองด้านล่าง คุณสามารถสร้างแบบฟอร์มที่ผู้ใช้สามารถพิมพ์ที่อยู่เริ่มต้นใดๆ และจะสร้างแผนที่จากที่อยู่นั้นไปยังที่อยู่ปลายทางที่คุณเลือก
สร้างแบบฟอร์ม Google Maps
เพื่อแสดงสิ่งที่ฉันหมายถึงโดยวิธีที่ 2 ให้พิมพ์ที่อยู่ในสหรัฐอเมริกาลงในช่องด้านล่างเพื่อขอเส้นทางจากตำแหน่งของคุณไปยังบ้านของฉัน:
เจ๋งใช่มั้ยล่ะ? คุณสามารถสร้างฟอร์มเล็กๆ นี้บนเว็บไซต์ บล็อก หรือที่ใดก็ได้ที่คุณสามารถใส่โค้ด HTML ได้! นอกจากนี้ยังเหมาะสำหรับเว็บไซต์ธุรกิจขนาดเล็ก เนื่องจากคุณสามารถใส่ไว้ในหน้าติดต่อของคุณและผู้คนสามารถขอเส้นทางได้อย่างรวดเร็ว แทนที่จะต้องคัดลอกที่อยู่ของคุณ เปิดหน้าต่างใหม่ แล้วพิมพ์ที่อยู่เริ่มต้น
แล้วเราจะสร้างกล่องขอเส้นทางที่แก้ไขนี้ได้อย่างไร ก่อนอื่น เราจะต้องได้รับไวยากรณ์ที่ถูกต้องสำหรับ URL ที่ Google ใช้สำหรับเส้นทาง โชคดีที่เราสามารถทราบได้โดยการขอเส้นทางระหว่างสถานที่สองแห่ง จากนั้นเพียงแค่คัดลอก URL จากแถบที่อยู่ คุณยังสามารถคลิกที่ไอคอนรูปเฟืองเล็กๆ ที่ด้านล่างขวาของหน้าและเลือก แชร์หรือฝังแผนที่ .
แท็บแชร์ลิงก์จะมี URL ซึ่งเป็น URL เดียวกันในแถบที่อยู่เบราว์เซอร์ของคุณ ฉันได้วาง URL ทั้งหมดด้านล่างเพื่อแสดงให้คุณเห็นว่าเป็นอย่างไร
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854+Deerfield+Rd, +อัลเลน,+TX+75013,+USA/@33.1125686,-96.7557749,13z/ data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2!1d-96.76248947! 1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f!2m2!1d-96.666151!2d33.133892
ใช่! ค่อนข้างยาว! มีหลายอย่างในนั้นซึ่งส่วนใหญ่ไม่สมเหตุสมผลเลย! พารามิเตอร์ URL ของ Google Maps เคยตรงไปตรงมาและง่ายมาก แต่โครงสร้าง URL ใหม่ค่อนข้างซับซ้อน โชคดีที่คุณยังคงใช้พารามิเตอร์เดิมได้ และ Google จะแปลงเป็นเวอร์ชันใหม่โดยอัตโนมัติ เพื่อดูว่าฉันหมายถึงอะไร โปรดดูลิงก์ด้านล่าง
https://maps.google.com/maps?saddr=start&daddr=end
ลองไปดูสิ ใส่ที่อยู่ในเครื่องหมายคำพูดสำหรับที่อยู่เริ่มต้นและสิ้นสุด และวาง URL ลงในเบราว์เซอร์ของคุณ! ฉันแทนที่ start ด้วยเมืองนิวออร์ลีนส์บ้านเกิดของฉัน และลงท้ายด้วย Houston, TX ดังนั้นนี่คือลักษณะ URL เส้นทาง Google Maps ของฉัน:
https://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
ได้ผล! อย่างที่คุณเห็น Google Maps จะแปลงลิงก์เป็นสิ่งที่ซับซ้อนกว่ามากเมื่อแผนที่โหลดจนเต็ม ตกลง ตอนนี้เรามี URL ที่เหมาะสมที่เราสามารถส่งต่อไปยัง Google Maps ได้ เราจำเป็นต้องสร้างแบบฟอร์มง่ายๆ ที่มีสองฟิลด์ ฟิลด์หนึ่งสำหรับที่อยู่เริ่มต้น และอีกฟิลด์สำหรับที่อยู่ปลายทาง
ถ้าคุณต้องการให้คนอื่นพิมพ์ที่อยู่ของพวกเขาและขอเส้นทางไปยังสถานที่ของคุณ เราจะต้องการซ่อนฟิลด์ที่สองและตั้งค่าเป็นที่อยู่ปลายทางแล้ว
ตรวจสอบรหัสด้านบน บรรทัดแรกเริ่มต้นจากแบบฟอร์มและบอกว่าเมื่อคลิกปุ่มส่ง ข้อมูลควรถูกส่งไปยัง maps.google.com/maps เป้าหมาย=ว่างเปล่า หมายความว่าเราต้องการให้ผลลัพธ์เปิดในหน้าต่างใหม่ จากนั้นเราก็มีกล่องข้อความสำหรับที่อยู่เริ่มต้นซึ่งว่างเปล่า
กล่องข้อความที่สองถูกซ่อนและค่าคือที่อยู่ปลายทางที่เราต้องการ สุดท้ายมีปุ่มส่งชื่อ "ขอเส้นทาง" ตอนนี้เมื่อมีคนพิมพ์ที่อยู่ของพวกเขา พวกเขาจะได้รับสิ่งนี้:
คุณสามารถปรับแต่งเส้นทางและแผนที่ได้มากขึ้นด้วยพารามิเตอร์พิเศษสองสามตัว ตัวอย่างเช่น สมมติว่าคุณไม่ต้องการให้มุมมองเริ่มต้นเป็นแผนที่ แต่ต้องการให้เป็นดาวเทียม และแสดงการจราจร .
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 ฟิลด์ใน URL layer=t สำหรับชั้นการรับส่งข้อมูลและ t=h หมายถึงแผนที่ไฮบริด! ท นอกจากนี้ยังสามารถตั้งค่าเป็น m สำหรับแผนที่ปกติ k สำหรับดาวเทียมและ p สำหรับภูมิประเทศ z คือระดับการย่อ/ขยาย และคุณสามารถเปลี่ยนได้ตั้งแต่ 1 ถึง 20 ใน URL ด้านบน มันถูกตั้งค่าเป็น 7 เพียงติดแท็กเหล่านั้นบน URL สุดท้ายของคุณ เท่านี้คุณก็มีแบบฟอร์ม Google Maps ขอเส้นทางที่ปรับแต่งได้สูงบนไซต์ของคุณ!
มีปัญหาใด ๆ กับสิ่งนี้ แสดงความคิดเห็นและฉันจะพยายามช่วย! สนุก!
