เพิ่มเส้นทางการขับขี่ของ Google Maps ไปยังเว็บไซต์ของคุณ

แม้ว่าจะมีแอพและบริการทำแผนที่มากมายให้คุณได้ตั้งแต่จุด A ถึงจุด B แต่ King of Map ที่ชัดเจนที่สุดคือ Google Maps ฉันใช้บนคอมพิวเตอร์แท็บเล็ตและ 90% ของเวลาบนสมาร์ทโฟน มันเป็นข้อมูลที่ดีที่สุดตัวเลือกการนำทางและการกำหนดเส้นทางส่วนใหญ่และคุณสมบัติที่ยอดเยี่ยมเช่นสตรีทวิวและการเดินการขี่จักรยานและการขนส่งมวลชน.

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

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

ฝัง Google Map

หากคุณต้องการแสดงเส้นทางจากสถานที่หนึ่งไปอีกที่หนึ่งสิ่งที่ง่ายที่สุดที่จะทำคือการฝังแผนที่ที่คุณกำลังดูอยู่โดยใช้รหัสฝัง ขั้นแรกไปข้างหน้าและตั้งค่าทิศทางที่คุณต้องการใน Google แผนที่จากนั้นคลิกที่ไอคอนรูปเฟืองที่ด้านล่างขวาของหน้า.

คลิกที่ แชร์หรือฝังแผนที่ จากนั้นคลิกที่ แผนที่ฝัง แถบ ที่นี่คุณสามารถเลือกขนาดแผนที่ของคุณแล้วคัดลอกรหัส iframe และวางลงบนหน้าเว็บที่คุณต้องการ.

ข้อเสียเพียงอย่างเดียวของวิธีนี้คือผู้ใช้จะเห็นแผนที่คงที่ ในวิธีที่สองด้านล่างคุณสามารถสร้างรูปแบบที่ผู้ใช้สามารถพิมพ์ที่อยู่เริ่มต้นและมันจะสร้างแผนที่จากที่อยู่นั้นไปยังที่อยู่ปลายทางที่คุณเลือก.

สร้างแบบฟอร์ม Google Maps

เพื่อแสดงให้เห็นว่าฉันหมายถึงอะไรด้วยวิธีที่สองไปข้างหน้าและพิมพ์ที่อยู่สหรัฐอเมริกาในช่องด้านล่างเพื่อขอเส้นทางจากที่ตั้งของคุณไปยังบ้านของฉัน:

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

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

แท็บแชร์ลิงก์จะมี URL ซึ่งเป็น URL เดียวกันในแถบที่อยู่เบราว์เซอร์ของคุณ ฉันไปข้างหน้าและวาง 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! 1m5! 1m0! 1s0x864c3d45018517a5: 0xbabd3c91a1321997! 2m2! 1d-96.76245! 1s0x864c16d3018a7f4f:! 0xab2052b5786cd29f 2m2 1D-96.666151 2d33.133892

อ๊ะ! มันค่อนข้างยาว! มีหลายสิ่งในนั้นส่วนใหญ่ไม่สมเหตุสมผล! พารามิเตอร์ URL ของ Google แผนที่นั้นใช้ง่ายและสะดวกมาก แต่โครงสร้าง URL ใหม่นั้นค่อนข้างซับซ้อน โชคดีที่คุณยังคงสามารถใช้พารามิเตอร์เก่าและ Google จะแปลงเป็นเวอร์ชันใหม่โดยอัตโนมัติ หากต้องการดูสิ่งที่ฉันหมายถึงตรวจสอบลิงค์ด้านล่าง.

http://maps.google.com/maps?saddr=start&daddr=end

ไปข้างหน้าและยิงมัน ใส่ที่อยู่ในเครื่องหมายคำพูดสำหรับที่อยู่เริ่มต้นและที่สิ้นสุดแล้ววาง URL ลงในเบราว์เซอร์ของคุณ! ฉันแทนที่เริ่มต้นด้วยเมืองบ้านเกิดของฉันนิวออร์ลีนส์และลงท้ายด้วยฮูสตันเท็กซัสดังนั้นนี่คือสิ่งที่ URL เส้นทางของ Google Maps ของฉันดูเหมือน:

http://maps.google.com/maps?saddr=” ใหม่ orleans, la” & daddr =” houston, tx”

มันได้ผล! อย่างที่คุณเห็น Google แผนที่จะแปลงลิงก์ให้เป็นสิ่งที่ซับซ้อนกว่าเดิมเมื่อแผนที่โหลดเต็ม ตกลงดังนั้นตอนนี้เรามี URL ที่มีสติซึ่งเราสามารถส่งผ่านไปยัง Google Maps ได้เราจำเป็นต้องสร้างฟอร์มที่เรียบง่ายด้วยสองฟิลด์หนึ่งฟิลด์สำหรับที่อยู่เริ่มต้นและอีกหนึ่งที่อยู่ปลายทาง.

หากคุณต้องการให้ผู้คนพิมพ์ที่อยู่ของพวกเขาและขอเส้นทางไปยังสถานที่ของคุณเราจะต้องการให้ฟิลด์ที่สองถูกซ่อนไว้และตั้งค่าเป็นที่อยู่ปลายทางแล้ว.

ป้อนที่อยู่เริ่มต้นของคุณ:

ตรวจสอบรหัสข้างต้น บรรทัดแรกเริ่มต้นจากแบบฟอร์มและแจ้งว่าเมื่อคลิกปุ่มส่งข้อมูลควรถูกส่งไปที่ maps.google.co.th/maps target = ว่างเปล่า หมายความว่าเราต้องการให้ผลลัพธ์เปิดในหน้าต่างใหม่ จากนั้นเรามีกล่องข้อความสำหรับที่อยู่เริ่มต้นซึ่งว่างเปล่า.

กล่องข้อความที่สองถูกซ่อนและค่าคือที่อยู่ปลายทางที่เราต้องการ ในที่สุดก็มีปุ่มส่งที่มีชื่อ“ ขอเส้นทาง” ตอนนี้เมื่อมีคนพิมพ์ที่อยู่ของพวกเขาพวกเขาจะได้รับสิ่งนี้:

คุณสามารถปรับแต่งทิศทางและแผนที่ได้มากขึ้นด้วยพารามิเตอร์พิเศษบางอย่าง ตัวอย่างเช่นสมมติว่าคุณไม่ต้องการให้มุมมองเริ่มต้นเป็นแผนที่ แต่ต้องการให้เป็นมุมมองแทน ดาวเทียม และแสดง การจราจร.

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

ขอให้สังเกต ชั้น t = และ t = ชั่วโมง เขตข้อมูลใน URL layer = t สำหรับเลเยอร์การจราจรและ t = h หมายถึงแผนที่ไฮบริด! เสื้อ สามารถตั้งค่าเป็น ม. สำหรับแผนที่ปกติ, k สำหรับดาวเทียมและ พี สำหรับภูมิประเทศ. Z คือระดับการซูมและคุณสามารถเปลี่ยนจาก 1 เป็น 20 ใน URL ด้านบนมันตั้งไว้ที่ 7 เพียงแค่เปลี่ยนเป็น URL สุดท้ายของคุณและตอนนี้คุณได้รับแบบฟอร์ม Google Maps ขอเส้นทางบนเว็บไซต์ของคุณเอง!

มีปัญหาใด ๆ กับสิ่งนี้โพสต์ความคิดเห็นและฉันจะพยายามช่วย! สนุก!