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


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

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

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

ฝังแผนที่ของ Google

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

share or embed map

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

embed map

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

สร้างฟอร์ม Google แผนที่

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

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

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

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

share or embed map

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

share link maps

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025 , + สหรัฐอเมริกา / 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 ของ Google แผนที่ใช้เพื่อให้ตรงไปตรงมาและใช้งานง่าย แต่โครงสร้าง URL ใหม่ค่อนข้างซับซ้อน โชคดีที่คุณยังสามารถใช้พารามิเตอร์เดิมได้และ Google จะแปลงให้เป็นเวอร์ชันใหม่โดยอัตโนมัติ หากต้องการดูว่าฉันหมายถึงอะไรให้ดูที่ลิงก์ด้านล่าง

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

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

http://maps.google.com/maps?saddr="new orleans, la "& amp; daddr =" houston, tx "

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

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

& lt; form action = " http://maps.google.com/maps "method =" get "target =" _ blank "& gt;
ป้อนที่อยู่เริ่มต้นของคุณ: & lt; type =" text "name =" saddr "/ & gt & lt; input type = "hidden" name = "daddr" value = "854 Deerfield Rd, Allen, TX" / & gt; & lt; input type = "submit" value = "ขอเส้นทาง" / & gt & lt; / form & gt;

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

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

maps directions

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

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

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

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

GPS / Google map พาเข้าป่า - วิธีตั้งค่าแก้ปัญหาเบื้้องต้น

กระทู้ที่เกี่ยวข้อง:


31.12.2014