Share Tích hợp Google Map vào website đơn giản với thư viện lazymap.js

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Việc tích hợp Google Map vào website yêu cầu các bạn phải tìm hiểu API của nó mất khá nhiều thời gian, thư viện lazymap.js sẽ giúp các bạn thực hiện việc này một cách đơn giản. Thư viện lazymap.js là một plugin của jQuery với chức năng nạp tự động bản đồ Google Map vào website mà không làm ảnh hưởng đến hiệu năng của website.

Để tích hợp thư viện lazymap.js, các bạn cần tích hợp thư viện jQuery vào website trước, sau đó tải thư viện lazymap.js tại địa chỉ https://www.jqueryscript.net/download/lazy-load-google-maps-lazymap.zip và tích hợp vào website như sau:
HTML:
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.lazymap.js"></script>
Các bạn tạo một vùng chứa bản đồ như ví dụ sau:
HTML:
<div class="lazymap" data-lat="41.898743" data-lng="12.498862" data-zoom="8"></div>
Và cài đặt thư viện lazymap.js như ví dụ sau:
JavaScript:
$(function() {
    $('.lazymap').lazymap({
        apiKey: 'YOUR_API_KEY'
    });
});
API key Google Map các bạn có thể lấy tại địa chỉ https://developers.google.com/maps/documentation/javascript/get-api-key.
 
Back
Top