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

- Advertisement -
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

BÀI VIẾT MỚI

Hướng dẫn tạo bộ đếm lùi thời gian bằng JavaScript

Mới đó mà đã gần nửa năm 2021 trôi qua. Tình hình dịch bệnh COVID-19 cũng chẳng mấy khả quan. Nhưng vẫn cứ hy...

Hướng dẫn tạo hiệu ứng mưa rơi trên trang web với JavaScript

Quy Nhơn chớm bước vào mùa hè với nắng nóng. Những lúc thế này tự nhiên lại thèm những cơn mưa để giải tỏa...

Instagram ra mắt tính năng tạo chú thích tự động cho Stories và Reels

Tiếp bước TikTok, Instagram hiện cũng đã ra mắt tính năng tạo chú thích (caption) tự động của riêng mình. Tính năng mới này đã...

Facebook đã chính thức cập nhật tính năng “bong bóng chat” trên iPhone

Mới đây, Facebook đã chính thức cập nhật tính năng Chat Heads (hay còn gọi là bong bóng chat) trên iPhone, cho phép người...

Facebook Workplace đạt mốc 7 triệu người dùng trả phí

Vào thứ Ba vừa rồi, Facebook vừa mới thông báo ứng dụng Facebook Workplace của họ tính cho tới thời điểm hiện tại đã...

BẠN XEM CHƯA

Một chút thông tin về đồng tiền ảo Libra của Facebook

Facebook sau khi công bố đồng tiền ảo Libra thì cũng đồng thời công bố nhiều tài liệu quan trọng liên quan tới thiết...

BatchSubtitlesConverter – Công cụ chuyển đổi qua lại các tập tin phụ đề

Bạn đang cần chuyển đổi một tập tin phụ đề sẵn có sang một định dạng khác để tương thích với một phương tiện...

Hướng dẫn nhận 50GB lưu trữ trực tuyến từ dịch vụ của pCloud

pCloud là dịch vụ lưu trữ trực tuyến cá nhân hỗ trợ người dùng lưu trữ và chia sẻ các tập tin hình ảnh,...

Operation Flashpoint: Cold War Crisis

Operation Flashpoint: Cold War Crisis là một trò chơi bắn súng chiến thuật và mô phỏng quân sự được phát triển bởi Bohemia Interactive...

Thêm tính năng đa ngôn ngữ cho trang web với Google Translate

Để triển khai một dự án web đa ngôn ngữ là vô cùng tốn nhiều công sức từ kỹ thuật đến dịch thuật. Tuy...