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 mời 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!
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 ra. 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 bên dưới.
Nhúng Google Map
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.
Nhấp vào Chia sẻ hoặc nhúng bản đồ và sau đó nhấp vào Bản đồ nhúng chuyển hướ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.
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 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:
Hay nhỉ? 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 rồi 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 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 đ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 đồ .
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.
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! 2d-96.762484! 2d33! 1m1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f! 2m2! 1d-96.666151! 2d33.133892
Rất tiếc! Điều đó khá lâu! 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 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.
https://maps.google.com/maps?saddr=start&daddr=end
Hãy tiếp tục và thử. Đặ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:
https://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 muốn trường thứ hai được ẩn và đã được đặt thành địa chỉ đích.
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, dữ liệu sẽ được gửi đến maps.google.com/maps. target =blank 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 bị ẩ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". Giờ đây, khi ai đó nhập địa chỉ của họ, họ sẽ nhận được thông tin này:
Bạn có thể tùy chỉnh chỉ đường và 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à thay vào đó muốn nó là Vệ tinh và hiển thị Giao thông .
https://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t
Lưu ý layer =t và t =h các trường 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 đối với bản đồ thông thường, k cho vệ tinh và p đối với đị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 những thứ đó 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 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 nhận xét và tôi sẽ cố gắng trợ giúp! Hãy tận hưởng!