แม้ว่าจะมีแอปและบริการ^{(apps and services)} การทำแผนที่มากมาย ที่จะพาคุณจากจุด A ไปยังจุด B ราชาแห่งแผนที่ขั้นสุดท้ายก็คือGoogle Maps ^{(Google Maps)}ฉันใช้คอมพิวเตอร์ แท็บเล็ต และ 90% ของเวลาทั้งหมดบนสมาร์ทโฟน มีข้อมูลที่ดีที่สุด ตัวเลือกการนำทางและการกำหนดเส้นทางส่วนใหญ่ และคุณลักษณะเจ๋งๆ เช่นStreet View และการเดิน^{(Street View and walking)} ข้อมูล การ ขี่ จักรยานและการขนส่งมวลชน^{(biking and mass transit info)}

แต่ถ้าคุณจำเป็นต้องใช้แผนที่หรือเส้นทาง^{(map or directions)}นอกเว็บไซต์ของ Google สมมติว่า^(Suppose)คุณมีเว็บไซต์งานแต่งงาน^{(wedding website)} ของคุณเอง หรือบล็อกส่วนตัว และแขก^{(blog and guests)}  สามารถเยี่ยมชมไซต์ของคุณได้ พิมพ์ที่อยู่ที่พวกเขาจะมาจากและรับเส้นทางไปยังสถานที่จัดงาน^{(event location)} โดยอัตโนมัติ !

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

ฝัง Google Map

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

คลิกที่Share or embed mapจากนั้นคลิกที่แท็บEmbed map ที่นี่คุณสามารถเลือกขนาดสำหรับแผนที่ของคุณ จากนั้นคัดลอกโค้ด iframe แล้ววางลง^{(iframe code and drop)}บนหน้าเว็บใดๆ ที่คุณต้องการ

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

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

เพื่อแสดงสิ่งที่ฉันหมายถึงโดยวิธีที่สอง ให้พิมพ์ที่อยู่สหรัฐฯ^{(US address)}ลงในช่องด้านล่างเพื่อขอเส้นทางจากตำแหน่งของคุณไปยังบ้านของฉัน:

เจ๋งป่ะ^{(Cool huh)} ? คุณสามารถสร้างแบบฟอร์มเล็กๆ นี้บนเว็บไซต์ บล็อก หรือที่ใดก็ได้ที่คุณสามารถใส่โค้ด HTML^{(HTML code)} ได้ ! นอกจากนี้ยังเหมาะสำหรับเว็บไซต์ธุรกิจ^{(business web)} ขนาดเล็ก เนื่องจากคุณสามารถใส่ไว้ในหน้าติดต่อของคุณ และผู้คน^{(contact page and people)}สามารถขอเส้นทางได้อย่างรวดเร็ว แทนที่จะต้องคัดลอกที่อยู่ของคุณ เปิดหน้าต่างใหม่ แล้วพิมพ์ที่อยู่เริ่มต้น^{(starting address)} ของพวก เขา

แล้วเราจะสร้างกล่องขอเส้นทางที่แก้ไขนี้ได้อย่างไร ก่อน^(Well)อื่น เราจะต้องได้รับรูปแบบที่ถูกต้องสำหรับURLที่Googleใช้สำหรับเส้นทาง โชคดีที่เราสามารถหาได้โดยการขอเส้นทางระหว่างสองแห่ง แล้วคัดลอกURLจากแถบที่^{(address bar)}อยู่ คุณยังสามารถคลิกไอคอนรูปเฟืองเล็กๆ ที่ด้านล่างขวาของหน้า แล้วเลือกแชร์หรือฝังแผนที่^{(Share or embed map)}

แท็ บแชร์ลิงก์^{(Share link)}จะมีURLซึ่งเป็นURL เดียวกัน ในแถบที่อยู่ของเบราว์^{(browser address bar)}เซอร์ ฉันได้วางURL ทั้งหมดด้านล่าง^{(URL below)}เพื่อแสดงให้คุณเห็นว่าเป็นอย่างไร

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 ของ Google Maps^{(Google Maps URL)}เคยตรงไปตรงมาและง่ายมาก แต่โครงสร้าง URL^{(URL structure)} ใหม่ ค่อนข้างซับซ้อน โชคดีที่คุณยังคงใช้พารามิเตอร์เดิมได้ และGoogleจะแปลงเป็นเวอร์ชันใหม่โดยอัตโนมัติ เพื่อดูว่าฉันหมายถึงอะไร โปรดดูลิงก์ด้านล่าง

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

ไปข้างหน้าและให้มันยิง ใส่ที่อยู่ในเครื่องหมายคำพูดสำหรับที่อยู่เริ่มต้นและสิ้นสุดและวาง^{(address and paste)}URLลงในเบราว์เซอร์ของคุณ! ฉันแทนที่ start ด้วยเมืองบ้านเกิด ของฉันที่ ^{(home city)} New Orleansและลงท้ายด้วยHouston , TX ดังนั้นนี่คือลักษณะURLเส้นทางGoogle Maps ของฉัน:^{(Google Maps)}

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

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

หากคุณต้องการให้คนอื่นพิมพ์ที่อยู่ของพวกเขาและขอเส้นทางไปยังสถานที่ของคุณ เราจะต้องการให้ฟิลด์ที่สองถูกซ่อนและตั้งค่าเป็นที่อยู่ปลายทาง^{(destination address)}แล้ว

<form action=”http://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>

ตรวจสอบรหัสด้านบน บรรทัดแรกเริ่มต้นจากแบบฟอร์มและบอกว่าเมื่อคลิกปุ่มส่ง^{(submit button)}ข้อมูลควรถูกส่งไปยัง maps.google.com/maps target=blank หมายความว่าเราต้องการ ให้ผลลัพธ์เปิดในหน้าต่างใหม่ จากนั้นเราจะมีกล่องข้อความ^{(text box)}สำหรับที่อยู่เริ่มต้น^{(starting address)}ซึ่งว่างเปล่า

กล่องข้อความ^{(text box)}ที่สองถูกซ่อนและค่าคือที่อยู่ปลายทาง^{(destination address)}ที่เราต้องการ สุดท้ายมีปุ่มส่งชื่อ "ขอเส้นทาง" ตอนนี้เมื่อมีคนพิมพ์ที่อยู่ของพวกเขา พวกเขาจะได้รับสิ่งนี้:

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

http://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 สำหรับtraffic layer and t=h meansแผนที่ไฮบริด! tยังสามารถตั้งค่าเป็นmสำหรับแผนที่ปกติkสำหรับดาวเทียม และ  pสำหรับภูมิประเทศ zคือระดับการย่อ^{(zoom level)} /ขยาย และคุณสามารถเปลี่ยนได้ตั้งแต่ 1 ถึง 20 ในURL ด้านบน มันถูกตั้งค่าเป็น 7 เพียง^(Just)ติดแท็กเหล่านั้นบนURL สุดท้ายของคุณ เท่านี้คุณก็จะมี ^(URL)แบบฟอร์ม Google Maps ขอเส้นทาง^{(Google Maps Get Directions form)}ที่ปรับแต่งได้สูงบนไซต์ของคุณ !

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

Add Google Maps Driving Directions to Your Website

Even though there are so many mapping apps and ѕervices out there to get yoυ from point A to point B, the definitive king of maps is Google Maps. I use it on mу computer, tablet and 90% of the time on my smartphone. It’s got the bеst dаta, the most nаvigation and routing options and cool features like Street View and walking, biking and mass transit info.

But what if you need to use a map or directions outside of Google’s website? Suppose you have your own wedding website or a personal blog and guests could visit your site, type in the address they will be coming from and automatically get directions to the event location!

Well, there are a couple of ways you can go about accomplishing this. The easiest way is to simply embed the map onto your webpage using the embed code generated by Google Maps. The second way is a bit more technical, but more customizable and dynamic. I’ll mention both methods below.

Embed Google Map

If you only want to display directions from one location to another, the easiest thing to do is to embed whatever map you are viewing using the embed code. First, go ahead and setup whatever directions you want in Google Maps and then click on the gear icon at the bottom right of the page.

Click on Share or embed map and then click on the Embed map tab. Here you can pick a size for your map and then copy the iframe code and drop that onto any webpage you like.

The only downside to this method is that the user just sees a static map. In the second method below, you can create a form whereby the user can type in any starting address and it will generate a map from that address to a destination address of your choosing.

Create Google Maps Form

To illustrate what I mean by the second method, go ahead and type a US address in the box below to get directions from your location to my house:

Cool huh? You can easily create this little form on any website, blog, or anywhere you can put in some HTML code! This is also great for small business web sites as you can throw it up on your contact page and people can get directions quickly, rather than having to copy your address, open a new window, and then type in their starting address.

So how do we go about creating this modified get directions box? Well first, we’ll need to get the correct syntax for the URL that Google uses for directions. Luckily, we can figure that out by getting directions between two places and then just copying the URL from the address bar. You can also click on the tiny gear icon at the very bottom right of the page and choose Share or embed map.

The Share link tab will contain the URL, which is the same URL in your browser address bar. I ‘ve gone ahead and pasted the entire URL below just to show you what it looks like.

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

Yikes! That’s pretty long! There’s a lot of stuff in there, most of which doesn’t make any sense! Google Maps URL parameters used to be very straightforward and easy, but the new URL structure is quite complicated. Thankfully, you can still use the old parameters and Google will convert them into the new version automatically. To see what I mean, check out the link below.

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

Go ahead and give it a shot. Put in an address in quotes for the starting and ending address and paste the URL into your browser! I replaced start with my home city New Orleans and end with Houston, TX, so this is what my Google Maps directions URL looks like:

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

It works! As you can see, though, Google Maps converts the links into something far more complicated once the map fully loads. Ok, so now that we have a sane URL that we can pass into Google Maps, we need to create a simple form with two fields, one for the starting address and one for the destination address.

If you want people to just type in their address and get directions to your place, then we’ll want the second field to be hidden and already set to the destination address.

<form action=”http://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>

Check out the code above. The first line starts out form and says that when the submit button is clicked, the data should be sent to maps.google.com/maps. The target=blank means that we want the result to open in a new window. Then we have a text box for the starting address, which is blank.

The second text box is hidden and the value is the destination address that we desire. Finally, there is a submit button with the title “Get Directions”. Now when someone types in their address, they’ll get this:

You can customize the directions and map even more with a few extra parameters. For example, let’s say you don’t want the default view to be maps, but instead want it to be Satellite and show Traffic.

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

Notice the layer=t and t=h fields in the URL. layer=t is for the traffic layer and t=h means hybrid map! t can also be set to m for normal map, k for satellite and p for terrain. z is the zoom level and you can change it from 1 to 20. In the above URL, it’s set to 7. Just tack those on to your final URL and you’ve now got a highly customized Google Maps Get Directions form on your site!

Have any issues with this, post a comment and I’ll try to help! Enjoy!

Related posts

• Google Maps ไม่พูดหรือบอกเส้นทางด้วยเสียงใช่หรือไม่ 12 วิธีในการแก้ไข

• คุณสมบัติ 9 Hidden ใน Google Maps คุณควรตรวจสอบ

• วิธีดู Google Maps Search History ของคุณ

• วิธีการใช้ Stops หลายใน Google Maps

• วิธีการ Embed Google Forms บน Your Website

• วิธีการแทรกลายเซ็นใน Google Docs

• วิธีดาวน์โหลดแผนที่บน Google Maps สำหรับการดูแบบออฟไลน์

• Metric and Dimension ใน Google Analytics คืออะไร

• วิธีการรับการ Inbox Zero ใน Gmail

• Software Reporter Tool ใน Chrome and How คืออะไรเพื่อปิดการใช้งาน

• วิธีการเปลี่ยน Default Google Account

• YouTube Algorithm Work เป็นอย่างไร

• รหัส Google Maps Plus คืออะไรและใช้งานอย่างไร

• คุณสามารถลบอีเมล์ทั้งหมดจาก Gmail ในครั้งเดียว

• วิธีการ Unsend Email ใน Gmail

• ประวัติตำแหน่งของ Google Maps: 5 สิ่งที่มีประโยชน์ที่คุณทำได้

• เพิ่มและแก้ไขความคิดเห็นใน Google เอกสาร

• วิธีการปักหมุดใน Google Maps บนเดสก์ท็อปและมือถือ

• วิธีฝัง Google ปฏิทินบนเว็บไซต์ของคุณ

• วิธีดูประวัติตำแหน่งของ Google Maps