Trang chủ Lập trình Javascript - HTML Viết tính năng xác định vị trí của bạn trên Google Maps...

Viết tính năng xác định vị trí của bạn trên Google Maps bằng Javascript

Lâu quá không viết bài chia sẻ về lập trình nên cũng tranh thủ viết một bài chia sẻ với mọi người. Bài viết hôm nay mình xin chia sẻ cách xây dựng tính năng cho phép hiển thị chính xác vị trí địa chỉ trên bản đồ của người dùng (trên Google Maps) thông qua IP đang sử dụng.

Như chúng ta đã biết là Google Maps sẽ hỗ trợ hiển thị vị trí thông qua kinh độ và vĩ độ. Vì vậy yêu cầu của ta sẽ được đáp ứng nếu ta tìm được vị trí địa lý chính xác của IP đang sử dụng. Và việc này thì hoàn toàn dễ dàng thông qua một dịch vụ hỗ trợ lấy thông tin IP.

google maps

Ở đây ta sẽ sử dụng dịch vụ lấy thông tin từ địa chỉ IP của GeoPlugin.Net đây là đoạn mã cụ thể:

Trên đây là hàm chính cũng là hàm duy nhất để lấy thông tin và tạo bản bồ. Bạn chú ý là bản đồ sẽ được tự động khởi tạo từ thẻ có ID là map_canvas. Vì vậy bạn cần tạo 1 thẻ bất kỳ tại vị trì cần chèn bản đồ và đặt ID của nó là: map_canvas.

Giờ đây để sử dụng bạn chỉ cần gọi là hàm đã khởi tạo là được.

Chú ý là để sử dụng ta phải chèn thư viên jQuery (https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js) và các hàm API của Google Maps (https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places) mới có thể sử dụng được nhé.

Các bạn có thể xem trang web mẫu tại đây.

Nếu các bạn có thắc mắc tại sao nó hiển thị thông tin không thật chính xác vị trí của mình. Mình xin giải thích là do IP bạn đang sử dụng là dạng IP động được cung cấp bởi nhà quản lý dịch vụ mạng nên thông tin được lưu trữ sẽ là thông tin nhà cung cấp dịch vụ nên kết quả hiển thị sẽ là vị trí của nhà cung cấp. Nếu có dịp mình sẽ hướng dẫn bạn cách xác định thông tin chính xác hơn với sự hỗ trợ của các dịch vụ khác.

Chúc các bạn thành công.

Huỳnh Mai Anh Kiệt

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -
Shopify

BÀI VIẾT MỚI

Hướng dẫn tạo hiệu ứng slow-motion với Instagram Reels

Sau khi cộng đồng công nghệ kêu gọi tẩy chay TikTok vì nghi ngờ ứng dụng này thu thập dữ liệu người dùng thì...

Amazon ra mắt Amazon Honeycode – Công cụ hỗ trợ người dùng tạo ứng dụng di động và web

Mới đây Amazon vừa thông báo ra mắt dịch Amazon Honeycode. Đây là một dịch vụ hỗ trợ người dùng tạo ra các ứng...

Điều gì sẽ xảy ra với cơ thể khi bạn trúng đạn

Chúng ta chắc hẳn đã xem khá nhiều bộ phim hành động mà trong đó nhân vật chính bị trúng đạn vào vai, vào...

Dad, How Do I? – Kênh Youtube cho những ai không có bố

Vừa qua, một kênh YouTube mới của một người đàn ông dạy bài học, kỹ năng về cuộc sống đã lan truyền cực kỳ...

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

BẠN XEM CHƯA

Kiểm tra tình trạng của điện thoại Android

Nếu bạn đang xài điện thoại hoặc máy tính bảng chạy hệ điều hành Android thì có thể nhập dãy ký tự *#*#4636#*#* thì...

Ezimba.com – Công cụ tạo hiệu ứng cho ảnh trực tuyến

Việc tạo các hiệu ứng đẹp cho bức ảnh thật sự không khó cho những ai là dân đồ họa chuyên nghiệp hay sử...

Kiddle – Trang tìm kiếm mới dành cho trẻ em

Kiddle.Co là một công cụ tìm kiếm mới đã được thiết kế dành riêng cho trẻ em. Đây là một sản phẩm kết hợp...

Khắc phục lỗi “We’re sorry, we can’t send your payment right now” khi thanh toán bằng Paypal

Đang làm việc với một trang bán hàng trực tuyến sử dụng cổng thanh toán Paypal. Hôm qua chạy rất là OK nhưng tự...

Hướng dẫn viết ứng dụng Facebook

Vô tình tìm thấy video hướng dẫn viết ứng dụng Facebook do bạn Vũ Thanh Lai - admin diễn đàn SinhVienIt chia sẻ trên...