Mặc dù có rất nhiều ứng dụng và dịch vụ lập bản đồ ngoài kia giúp bạn từ điểm A đến điểm B, 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 của mình. Nó có dữ liệu tốt nhất, tùy chọn định tuyến 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à chuyển tuyến.
Nhưng điều gì sẽ xảy ra nếu bạn cần sử dụng bản đồ hoặc chỉ đường bên ngoài trang web của Google? Giả sử bạn có trang web đám cưới của riêng bạn hoặc blog cá nhân và khách có thể truy cập trang web của bạn, nhập địa chỉ họ sẽ đến và tự động nhận chỉ đường tới địa điểm sự kiện!
Vâng, có một vài cách bạn có thể đi về việc hoàn thành đ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 được tạo bởi Google Maps. 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ễ nhất cần 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 và 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 đồvà sau đó nhấp vào tab Nhúng bản đồ. Tại đây bạn có thể chọn kích thước cho bản đồ của mình và sau đó sao chép mã iframe và thả vào bất kỳ trang web nào bạn thích.
Nhược điểm duy nhất phương pháp này là người dùng chỉ 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 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 bạn chọn.
Tạo Biểu mẫu Google Maps
Để minh họa ý tôi bằng phương pháp thứ hai, hãy tiếp tục và nhập địa chỉ Hoa Kỳ vào hộp bên dưới để nhận chỉ đường từ vị trí của bạn đến nhà của tôi:
Tuyệt vời 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 cứ nơi nào bạn có thể đặt trong một số mã HTML! Điều này cũng tuyệt vời cho các trang web doanh nghiệp nhỏ vì bạn có thể ném 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ở 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 nhận chỉ đường đã sửa đổi này? Trước tiên, chúng tôi sẽ cần có 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 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 đồ.
Tab Chia sẻ liên kết sẽ chứa URL, cùng một 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.
https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025 , + Hoa Kỳ / 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
Yikes! Đó 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ác tham số URL của Google Maps được sử dụng 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 thành phiên bản mới. Để xem ý tôi là gì, hãy xem liên kết bên dưới.
http://maps.google.com/maps?saddr=start&daddr=end
Tiếp tục và cho nó một shot. Đặt vào 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 với Houston, TX, vì vậy đây là URL chỉ đường Google Maps của tôi trông giống như:
http://maps.google.com/maps?saddr=”các orleans mới, la ”& amp; daddr =” houston, tx ”
Nó hoạt động! Như bạn có thể thấy, mặc dù, Google Maps chuyển đổi các liên kết thành một cái gì đó phức tạp hơn nhiều khi bản đồ hoàn toàn tải. Ok, do đó, bây giờ chúng tôi có một URL lành mạnh mà chúng tôi có thể chuyển vào Google Maps, chúng tôi 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, sau đó chúng tôi sẽ muốn trường thứ hai bị ẩn và đã được đặt thành địa chỉ đích.
& lt; form action = ” http://maps.google.com/maps ”method =” get ”target =” _ blank ”& gt;
Nhập địa chỉ xuất phát của bạn:
& lt; kiểu nhập =" văn bản "name =" saddr "/ & gt ;
& lt; input type = ”hidden” name = ”daddr” value = ”854 Deerfield Rd, Allen, TX” / & gt;
& lt; kiểu nhập = "gửi" giá trị = "nhận chỉ đường" / & gt ;
& lt; / form & gt;
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 nút gửi được nhấp, dữ liệu sẽ được gửi đến maps.google.com/maps. target = blankcó nghĩa là chúng tôi muốn kết quả mở trong 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, địa chỉ trống.
Hộp văn bản thứ hai bị ẩn và giá trị là địa chỉ đích mà chúng tôi mong muốn. Cuối cùng, có một nút gửi với tiêu đề "Tìm Chỉ đường". Bây giờ khi ai đó gõ địa chỉ của họ, họ sẽ nhận được điều này:
Bạn có thể tùy chỉnh chỉ đường và bản đồ nhiều hơn bằng một vài tham số bổ sung . Ví dụ: giả sử bạn không muốn chế độ xem mặc định là bản đồ nhưng thay vào đó nó muốn là Vệ tinhvà hiển thị Giao thông.
Lưu ý các trường lớp = tvà t = htrong URL. lớp = t là cho lớp lưu lượng và t = h có nghĩa là bản đồ lai! tcũng có thể được đặt thành mcho bản đồ bình thường, kcho vệ tinh và pcho địa hình. zlà mức thu phóng và bạn có thể thay đổi nó từ 1 đến 20. Trong URL ở trên, URL được đặt thành 7. Chỉ cần lưu các URL đó vào URL cuối cùng của bạn và bây giờ bạn đã có Google tùy biến cao Maps Nhận biểu mẫu Chỉ đường trên trang web của bạn!
Có bất kỳ vấn đề nào với vấn đề này, đăng nhận xét và tôi sẽ cố gắng trợ giúp! Hãy tận hưởng!