Blog

Thêm chỉ đường lái xe của Google Maps vào trang web của bạn

Giúp khách hàng hoặc bạn bè dễ dàng tìm thấy bạn

Có thể bạn quan tâm :

Mặc dù có rất nhiều ứng dụng và dịch vụ 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ộ, đi xe đạp và phương tiện công cộng.

Nhưng nếu bạn cần sử dụng bản đồ hoặc chỉ đường bên ngoài trang web của Google thì sao? Giả sử bạn có trang web đám cưới của riêng mình hoặc blog cá nhân và khách 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!

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, 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.

share or embed map

share or embed map

Nhấp vào Chia sẻ hoặc nhúng bản đồ và sau đó nhấp vào tab Bản đồ nhúng. 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ã đó vào bất kỳ trang web nào bạn thích.

embed map

embed map

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ỉ bắt đầu nào và nó sẽ tạo bản đồ từ địa chỉ đó đến địa chỉ đích 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ỳ vào ô bên dưới để nhận chỉ đường từ vị trí của bạn đến nhà tôi:

Nhập địa chỉ xuất phát của bạn:

Tuyệt hả? 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! Điều này cũng rất tốt cho các trang web doanh nghiệp nhỏ vì bạn có thể đưa nó lên trang liên hệ của mình và mọi người 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 của họ.

Vậy làm cách nào để tạo hộp chỉ đường đã sửa đổi này? Trước tiên, chúng ta 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ỉ. 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

share or embed map

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

share link maps

share link maps

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025,+USA/ 854 + Deerfield + Rd, + Allen, + TX + 75013, + Hoa Kỳ / @ 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 trong số đó không có ý nghĩa gì! Các tham số URL của Google Maps trước đây rất đơn giản và dễ dàng, nhưng cấu trúc URL 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à dán 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 New Orleans và kết thúc bằng Houston, TX, vì vậy, đây là URL chỉ đường trên 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 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 và một cho địa chỉ đích.

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.

<form action = ”http://maps.google.com/maps” method = ”get” target = ”_ blank”>
Nhập địa chỉ xuất phát của bạn:
<input type = ”text” name = ”saddr” />
<input type = ”hidden” name = ”daddr” value = ”854 Deerfield Rd, Allen, TX” />
<input type = ”submit” value = ”nhận chỉ đường” />
</form>

Kiểm tra mã ở trên. Dòng đầu tiên bắt đầu biểu mẫu và cho biết rằng khi nhấp vào nút gửi, dữ liệu sẽ được gửi tới maps.google.com/maps. Mục tiêu = 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 cho địa chỉ bắt đầu, trống.

Hộp văn bản thứ hai được ẩn và giá trị là địa chỉ đích 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:

maps directions

maps directions

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 là bản đồ, mà muốn chế độ xem này là Vệ tinh và hiển thị Giao thông .

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 = tt = h trong URL. layer = t dành cho lớp giao thông và t = h có nghĩa là 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 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 gắn chúng vào URL cuối cùng của bạn và bây giờ bạn đã có biểu mẫu Nhận chỉ đường của Google Maps được tùy chỉnh cao trên trang web của mình !

Có bất kỳ vấn đề nào với vấn đề này, hãy đăng bình luận và tôi sẽ cố gắng giúp đỡ! Thưởng thức!

Free Download Thêm chỉ đường lái xe của Google Maps vào trang web của bạn :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Join our official telegram group and channel for latest updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Vui lòng tắt extension, các ứng dụng chặn quảng cáo trước khi truy cập !!!!! Please disable extensions, ad blocking applications before accessing!!!!!