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://anhkiet.biz
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 cho Hura Apps - một startup nhỏ về công nghệ 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

Binance Launchpad có dễ… húp như bạn tưởng

Tiền kỹ thuật số (cryptocurrency) đang dần mở rộng. Kể ra mình biết khái niệm này từ rất lâu. Nếu các bạn là độc...

10 Công Cụ Có Thể Thay Thế ChatGPT

ChatGPT là một mô hình ngôn ngữ lớn được phát triển bởi OpenAI. Nó cung cấp các câu trả lời nhanh chóng và ngắn...

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Highland Coffee đang có nhiều chương trình khuyến mã cho khách hàng của mình. Các khuyến mãi có thể bao gồm upsize, mua 1...

Quà cuối năm 2022 từ Shopify

Năm nay nhận quà từ các đối tác công nghệ hơi bị nhiều. Mới đây mình lại nhận được quà từ Shopify. Quà về đúng...

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

BẠN XEM CHƯA

Hịch giáo dục

Ta cùng các ngươi Sinh ra phải thời bao cấp Lớn lên gặp buổi thị trường. Trông thấy Mỹ phóng Con thoi lên vũ trụ chín tầng Nga lặn...

Học làm thật tốt những việc dễ, trước khi nghĩ đến những việc khó hơn

Trừ những người may mắn trúng số hoặc được thừa kế gia tài, ai muốn thành công cũng phải vượt qua những thách thức...

Đăng ký thông tin công ty của bạn trên Crunchbase để nhanh lên top Google

Crunchbase là một nền tảng để tìm kiếm thông tin kinh doanh về các công ty tư nhân và công cộng. Thông tin của...

Google hỗ trợ hơn 400 tỷ để Ấn Độ đối phó dịch COVID-19

Mới đây tài khoản Twitter của Sundar Pichai - giám đốc điều hành của Google đã chia sẻ thông tin rằng Google sẽ hỗ...

Vô tình làm lính đánh thuê cho một dự án tham gia trong Shark Tank

Nếu đam mê các chương trình khởi nghiệp thì chắc chắn các bạn sẽ biết đến "Shark Tank Việt Nam - Thương vụ bạc...