Mặc dù có rất nhiều ứng dụng và dịch vụ^{(apps and services)} lập bản đồ giúp bạn đi từ điểm A đến điểm B, nhưng vị vua cuối cùng của bản đồ là Google Maps . Tôi sử dụng nó trên máy tính, máy tính bảng và 90% thời gian trên điện thoại thông minh. Nó có dữ liệu tốt nhất, nhiều tùy chọn điều hướng và định tuyến nhất cũng như các tính năng thú vị như Chế độ xem phố và thông tin đi bộ^{(Street View and walking)} , đi xe đạp và phương tiện công cộng^{(biking and mass transit info)} .

Nhưng nếu bạn cần sử dụng bản đồ hoặc chỉ đường^{(map or directions)} bên ngoài trang web của Google thì sao? Giả sử^(Suppose) bạn có trang web đám cưới^{(wedding website)} của riêng mình hoặc blog cá nhân và khách^{(blog and guests)}  có thể truy cập trang web của bạn, hãy nhập địa chỉ họ sẽ đến và tự động nhận chỉ đường đến địa điểm tổ chức sự kiện^{(event location)} !

Chà, có một số cách bạn có thể thực hiện để đạt được điều này. Cách dễ nhất là chỉ cần nhúng bản đồ vào trang web của bạn bằng cách sử dụng mã nhúng do Google Maps tạo . Cách thứ hai là kỹ thuật hơn một chút, nhưng có thể tùy chỉnh và năng động hơn. Tôi sẽ đề cập đến cả hai phương pháp dưới đây.

Nhúng bản đồ Google

Nếu bạn chỉ muốn hiển thị chỉ đường từ vị trí này đến vị trí khác, điều dễ dàng nhất để làm là nhúng bất kỳ bản đồ nào bạn đang xem bằng cách sử dụng mã nhúng. Trước tiên^(First) , hãy tiếp tục và thiết lập bất kỳ chỉ đường nào bạn muốn trong Google Maps , sau đó nhấp vào biểu tượng bánh răng ở dưới cùng bên phải của trang.

Nhấp vào Chia sẻ hoặc nhúng bản đồ^{( Share or embed map)} , sau đó nhấp vào tab Bản đồ nhúng . ^{(Embed map)}Tại đây, bạn có thể chọn kích thước cho bản đồ của mình, sau đó sao chép mã iframe và thả mã^{(iframe code and drop)} đó vào bất kỳ trang web nào bạn thích.

Nhược điểm duy nhất của phương pháp này là người dùng chỉ nhìn thấy một bản đồ tĩnh. Trong phương pháp thứ hai bên dưới, bạn có thể tạo một biểu mẫu theo đó người dùng có thể nhập bất kỳ địa chỉ xuất phát nào và nó sẽ tạo bản đồ từ địa chỉ đó đến địa chỉ đích^{(destination address)} mà bạn chọn.

Tạo biểu mẫu Google Maps

Để minh họa ý tôi theo phương pháp thứ hai, hãy tiếp tục và nhập địa chỉ Hoa Kỳ^{(US address)} vào ô bên dưới để nhận chỉ đường từ vị trí của bạn đến nhà tôi:

Hay quá hả^{(Cool huh)} ? Bạn có thể dễ dàng tạo biểu mẫu nhỏ này trên bất kỳ trang web, blog hoặc bất kỳ nơi nào bạn có thể đặt một số mã HTML^{(HTML code)} ! Điều này cũng rất tốt cho các trang web doanh nghiệp^{(business web)} nhỏ vì bạn có thể đưa nó lên trang liên hệ của mình và mọi người^{(contact page and people)} có thể nhận chỉ đường nhanh chóng, thay vì phải sao chép địa chỉ của bạn, mở một cửa sổ mới, sau đó nhập địa chỉ xuất phát^{(starting address)} của họ .

Vậy làm cách nào để tạo hộp chỉ đường đã sửa đổi này? Trước^(Well) tiên, chúng tôi sẽ cần lấy cú pháp chính xác cho URL mà Google sử dụng để chỉ đường. May mắn thay, chúng tôi có thể tìm ra điều đó bằng cách nhận chỉ đường giữa hai địa điểm và sau đó chỉ cần sao chép URL từ thanh địa chỉ^{(address bar)} . Bạn cũng có thể nhấp vào biểu tượng bánh răng nhỏ ở dưới cùng bên phải của trang và chọn Chia sẻ hoặc nhúng bản đồ^{(Share or embed map)} .

Tab Chia sẻ liên kết^{(Share link)} sẽ chứa URL , chính là URL trong thanh địa chỉ trình duyệt^{(browser address bar)} của bạn . Tôi đã tiếp tục và dán toàn bộ URL bên dưới^{(URL below)} chỉ để cho bạn thấy nó trông như thế nào.

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

Rất tiếc! Đó là khá dài! Có rất nhiều thứ trong đó, hầu hết đều không có ý nghĩa gì! Các tham số URL của Google Maps^{(Google Maps URL)} trước đây rất đơn giản và dễ dàng, nhưng cấu trúc URL^{(URL structure)} mới khá phức tạp. Rất may, bạn vẫn có thể sử dụng các thông số cũ và Google sẽ tự động chuyển đổi chúng sang phiên bản mới. Để hiểu ý tôi, hãy xem liên kết bên dưới.

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

Hãy tiếp tục và cung cấp cho nó một shot. Đặt một địa chỉ trong dấu ngoặc kép cho địa chỉ bắt đầu và kết thúc và ^(URL)dán^{(address and paste)} URL vào trình duyệt của bạn! Tôi đã thay thế bắt đầu bằng thành phố quê hương ^{(home city)}New Orleans và kết thúc bằng Houston , TX, vì vậy, đây là URL chỉ đường trên Google Maps^{(Google Maps)} của tôi trông như thế nào:

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

Nó hoạt động! Tuy nhiên, như bạn có thể thấy, Google Maps chuyển đổi các liên kết thành một thứ gì đó phức tạp hơn nhiều khi bản đồ tải đầy đủ. Được rồi, bây giờ chúng ta đã có một URL^(URL) lành mạnh để có thể chuyển vào Google Maps , chúng ta cần tạo một biểu mẫu đơn giản với hai trường, một cho địa chỉ xuất phát^{(starting address)} và một cho địa chỉ đích^{(destination address)} .

Nếu bạn muốn mọi người chỉ cần nhập địa chỉ của họ và nhận chỉ đường đến địa điểm của bạn, thì chúng tôi sẽ muốn trường thứ hai bị ẩn và đã được đặt thành địa chỉ đích^{(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>

Kiểm tra mã ở trên. Dòng đầu tiên bắt đầu biểu mẫu và nói rằng khi nhấp vào nút gửi^{(submit button)} , dữ liệu sẽ được gửi tới maps.google.com/maps. Mục target=blank có nghĩa là chúng ta muốn kết quả mở trong một cửa sổ mới. Sau đó, chúng tôi có một hộp văn bản^{(text box)} cho địa chỉ bắt đầu^{(starting address)} , trống.

Hộp văn bản^{(text box)} thứ hai bị ẩn và giá trị là địa chỉ đích^{(destination address)} mà chúng ta mong muốn. Cuối cùng, có một nút gửi với tiêu đề "Nhận chỉ đường". Bây giờ khi ai đó nhập địa chỉ của họ, họ sẽ nhận được:

Bạn có thể tùy chỉnh chỉ đường và lập bản đồ nhiều hơn nữa với một vài thông số bổ sung. Ví dụ: giả sử bạn không muốn chế độ xem mặc định^{(default view)} là bản đồ mà thay vào đó muốn chế độ xem này là Vệ tinh^(Satellite) và hiển thị Giao thông^(Traffic) .

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

Lưu ý các trường layer=t và t=h trong URL . layer = t dành cho traffic layer and t=h means bản đồ lai! t cũng có thể được đặt thành m cho bản đồ bình thường, k cho vệ tinh và  p cho địa hình. z là mức thu phóng^{(zoom level)} và bạn có thể thay đổi nó từ 1 thành 20. Trong URL ở trên , nó được đặt thành 7. Chỉ cần^(Just) gắn những mức đó vào URL cuối cùng của bạn và bây giờ bạn đã có một biểu mẫu Nhận chỉ đường của Google Maps được^{(Google Maps Get Directions form)} tùy chỉnh cao trên trang web của mình !

Có bất kỳ vấn đề nào với điều này, hãy đăng một bình luận và tôi sẽ cố gắng giúp đỡ! Vui thích!

Add Google Maps Driving Directions to Your Website

Εven though there are so many mapping apps and services out there to get you from point A to point B, the definitive king of maps is Google Maps. I use it on my computer, tablet and 90% of the time on my smartphone. It’s got the best datа, the most navigation 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 không nói hoặc chỉ đường bằng giọng nói? 12 cách sửa chữa

• 9 tính năng Hidden trong Google Maps Bạn nên kiểm tra

• Cách xem Google Maps Search History của bạn

• Cách sử dụng nhiều Stops trong Google Maps

• Cách Embed Google Forms trên Your Website

• Cách xem Lịch sử Vị trí trên Google Maps

• Cách sử dụng theo dõi cháy rừng của Google Maps

• Cách hủy hoặc tạm dừng YouTube Premium Subscription

• Làm thế nào để sử dụng Google Family Calendar để Giữ Family của bạn On Time

• Cách xóa YouTube History and Search Activity

• 3 cách để Create Borders trong Google Docs

• các Google App & How để sử dụng nó là gì

• Làm thế nào để Turn Google SafeSearch Off

• Google “giao thông bình thường” Lỗi là gì và như thế nào để Fix It

• Lịch sử vị trí trên Google Maps: 5 điều hữu ích bạn có thể làm với nó

• Cách nhúng Lịch Google vào trang web của bạn

• Google My Activity: Tại sao bạn nên quan tâm

• Cách gửi Private Emails bằng Gmail

• Cách thay đổi Default Google Account

• 8 Google Search Tips: Luôn tìm những gì bạn là Looking cho