Mặc dù có rất nhiều ứng dụng và dịch vụ bản đồ để đưa bạn từ điểm A đến điểm B, nhưng "vua" không thể tranh cãi của bản đồ là Google Maps. Tôi dùng nó trên máy tính, máy tính bảng và 90% thời gian trên smartphone. Nó có dữ liệu tốt nhất, nhiều tùy chọn định tuyến và điều hướng nhất và các tính năng thú vị như Street View, thông tin đi bộ, 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? Giả sử bạn có trang web cưới 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 từ đó và tự động nhận chỉ đường đến địa điểm sự kiện!
Có vài cách để thực hiện điều này. Cách dễ nhất là nhúng bản đồ lên trang web của bạn bằng mã nhúng (embed code) do Google Maps tạo ra. Cách thứ hai hơi kỹ thuật hơn, nhưng tùy chỉnh và động hơn. Tôi sẽ đề cập cả hai phương pháp dưới đây.
Nhúng Google Maps
Nếu bạn chỉ muốn hiển thị chỉ đường từ một địa điểm đến địa điểm khác, việc dễ nhất là nhúng bất kỳ bản đồ bạn đang xem bằng mã nhúng. Đầu tiên, thiết lập chỉ đường bạn muốn trong Google Maps, sau đó nhấn vào biểu tượng bánh răng ở góc dưới bên phải của trang.
Nhấn vào Share or embed map (Chia sẻ hoặc nhúng bản đồ) sau đó nhấn tab Embed map (Nhúng bản đồ). Tại đây bạn có thể chọn kích thước cho bản đồ và sao chép mã iframe và dán 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ỉ thấy bản đồ tĩnh. Trong phương pháp thứ hai dưới đây, bạn có thể tạo một biểu mẫu cho phép người dùng 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 bạn chọn.
Tạo Biểu Mẫu Google Maps
Để minh họa phương pháp thứ hai, hãy nhập một địa chỉ Mỹ vào hộp dưới để lấy chỉ đường từ vị trí của bạn đến nhà tôi:
Thú vị phải không? Bạn dễ dàng tạo biểu mẫu nhỏ này trên bất kỳ trang web, blog, hoặc nơi nào bạn có thể đặt mã HTML! Điều này cũng tuyệt vời cho trang web doanh nghiệp nhỏ vì bạn có thể đặt nó trên trang liên hệ và mọi người có thể lấy chỉ đường nhanh chóng, thay vì phải sao chép địa chỉ của bạn, mở cửa sổ mới, rồi nhập địa chỉ bắt đầu của họ.
Làm thế nào để tạo hộp lấy chỉ đường tùy chỉnh này? Đầu tiên, chúng ta cần lấy cú pháp URL đúng mà Google dùng cho chỉ đường. May mắn thay, chúng ta có thể tìm ra bằng cách lấy chỉ đường giữa hai địa điểm rồi sao chép URL từ thanh địa chỉ. Bạn cũng có thể nhấn vào biểu tượng bánh răng nhỏ ở góc dưới bên phải và chọn Share or embed map.
Tab Share link sẽ chứa URL, giống với URL trong thanh địa chỉ trình duyệt. Tôi đã dán toàn bộ URL dưới đây để 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
Trời ơi! Đó là khá dài! Có rất nhiều thứ trong đó, hầu hết không có ý nghĩa! Các tham số URL của Google Maps trước đây rất đơn giản và dễ hiểu, nhưng cấu trúc URL mới khá phức tạp. May mắn thay, bạn vẫn có thể dùng các tham số cũ và Google sẽ tự động chuyển đổi chúng sang phiên bản mới. Để thấy điều này, hãy xem liên kết dưới đây.
https://maps.google.com/maps?saddr=start&daddr=end
Hãy thử. Đặ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! Tôi thay start bằng thành phố nhà tôi New Orleans và end bằng Houston, TX, nên URL chỉ đường Google Maps của tôi trông như thế này:
https://maps.google.com/maps?saddr=”new orleans, la”&daddr=”houston, tx”
Nó hoạt động! Như bạn thấy, tuy nhiên, Google Maps chuyển đổi các liên kết thành thứ phức tạp hơn nhiều khi bản đồ tải xong. Vậy, bây giờ chúng ta có một URL hợp lý có thể truyề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ỉ bắt đầu và một cho địa chỉ đích.
Nếu bạn muốn mọi người chỉ nhập địa chỉ của họ và lấy chỉ đường đến nơi của bạn, thì chúng ta sẽ muốn trường thứ hai ẩn và đã đặt sẵn địa chỉ đích.
<form action=”https://maps.google.com/maps” method=”get” target=”_blank”>
Nhập địa chỉ bắt đầu của bạn:
<input type=”text” name=”saddr” />
<input type=”hidden” name=”daddr” value=”854 Deerfield Rd, Allen, TX” />
<input type=”submit” value=”get directions” />
</form>
Xem mã trên. Dòng đầu bắt đầu form và nói rằng khi nút submit được nhấn, 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 cửa sổ mới. Sau đó có hộp văn bản cho địa chỉ bắt đầu, để trống.
Hộp văn bản thứ hai ẩn và giá trị là địa chỉ đích chúng ta mong muốn. Cuối cùng, có nút submit với tiêu đề "Get Directions". 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à bản đồ hơn nữa với 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 đồ, mà muốn Satellite (Vệ tinh) và hiển thị Traffic (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
Chú ý các trường layer=t và t=h trong URL. layer=t là cho lớp giao thông và t=h nghĩa là bản đồ hybrid (kết hợp)! t cũng có thể đặt thành m cho bản đồ thường, k cho vệ tinh và p cho địa hình. z là mức zoom và bạn có thể thay đổi từ 1 đến 20. Trong URL trên, nó đặt là 7. Chỉ cần thêm chúng vào URL cuối cùng và bạn đã có một biểu mẫu Google Maps Get Directions được tùy chỉnh cao trên trang web của mình!
Có bất kỳ vấn đề nào, hãy đăng bình luận và tôi sẽ cố gắng giúp đỡ! Thưởng thức!