Dưới đây là các thư viện JS mà bạn có thể sử dụng để hiển thị các điểm đánh dấu bản đồ đặc biệt, vẽ các tuyến đường tùy chỉnh hoặc thậm chí hiển thị hộp thoại khi bạn di chuột hoặc nhấp vào các điểm nhất định trên bản đồ.
Cá nhân hóa bản đồ của bạn theo phong cách bạn muốn – một số trong số chúng có thể được tạo kiểu bằng CSS – hoặc tùy chỉnh bản đồ của bạn để tương tác theo ý muốn . Nguồn của dữ liệu bản đồ, phụ thuộc và giấy phép của mỗi thư viện đã được đưa vào để thuận tiện cho bạn.
GMaps
GMaps giúp việc thêm và tùy chỉnh Google Maps trở nên dễ dàng. Ngoài việc thêm bản đồ, bạn cũng có thể đưa một số thứ vào bản đồ, chẳng hạn như các đường đa giác có thể hữu ích để vẽ tuyến đường, điều khiển menu đặc biệt và thậm chí cả các phần tử HTML.
GMaps tương thích với dữ liệu có định dạng JSON mà bạn có thể sử dụng để tích hợp bản đồ của mình với một ứng dụng cụ thể, chẳng hạn như Foursquare.
- Nguồn dữ liệu bản đồ: Google Maps
- Phụ thuộc: không có
- Giấy phép: Giấy phép MIT
jHere
Với 5KB, jHERE cho bạn thấy rằng kích thước không quan trọng; bạn vẫn có thể xây dựng một bản đồ tương tác mạnh mẽ với một số tùy chọn tùy chỉnh. jHERE sử dụng data bản đồ từ bản đồ HERE, là một trong những nhà cung cấp bản đồ phổ biến nhất cho Windows Phone.
Thư viện có thể được mở rộng với chức năng mới và có một số tiện ích mở rộng được phát triển cho thư viện này bao gồm một tiện ích mở rộng để thêm hình dạng, tuyến đường và điểm đánh dấu tùy chỉnh.
- Nguồn dữ liệu bản đồ: HERE Maps
- Phụ thuộc: jQuery hoặc ZeptoJS
- Giấy phép: Giấy phép MIT
Kartograph
Kartograph bao gồm hai tệp, Kartograph.ph để tạo bản đồ ở định dạng SVG và Kartograph.js để thêm các yếu tố tương tác trên bản đồ. Vì Kartograph.js được xây dựng trên Raphael.js nên bản đồ sẽ hoạt động tốt cho đến IE7.
- Nguồn dữ liệu bản đồ: Kartograph
- Phụ thuộc: Kartograph.py, Raphael và jQuery
- Giấy phép: AGPL và LGPL
Mapael
jQuery Mapael cho phép bạn tạo bản đồ với khả năng hiển thị dữ liệu trang nhã cũng như tính tương tác. Ví dụ: bạn có thể tạo bản đồ và chỉ định từng khu vực trên bản đồ với các màu sắc khác nhau dựa trên khu vực. Bạn cũng có thể thêm chú giải công cụ trên khu vực, cũng như các trình xử lý sự kiện như clickhoặc hover.
Bản đồ được xây dựng có tính đến SEO bằng cách cung cấp nội dung thay thế cho các robot tìm kiếm không có khả năng thu thập thông tin nội dung do JavaScript tạo.
- Nguồn dữ liệu bản đồ: Raphael.js
- Phụ thuộc: jQuery
- Giấy phép: Giấy phép MIT
D3js
D3.js là một thư viện JavaScript toàn diện sẽ làm cho dữ liệu của bạn trở nên sống động thông qua HTML, SVG và CSS. Việc sử dụng D3 khá đa dạng bao gồm cả việc xây dựng một bản đồ có tính tương tác cao.
- Nguồn dữ liệu bản đồ: D3.js
- Phụ thuộc: không có
- Giấy phép: Không xác định
DataMaps
Nếu việc xây dựng bản đồ với D3.js là quá sức, bạn có thể sử dụng DataMaps. DataMaps về cơ bản là một plugin D3.js được phát triển đặc biệt để xây dựng bản đồ. Nó kế thừa nhiều khả năng của D3.js, do đó bạn có thể xây dựng các bản đồ đơn giản hoặc rất tùy chỉnh với nó.
- Nguồn dữ liệu bản đồ: D3.js
- Phụ thuộc: D3.js và TopoJSON
- Giấy phép: Giấy phép MIT
GeoChart
GeoChart là một bản đồ Google được đơn giản hóa hiển thị khu vực, điểm đánh dấu và văn bản, thay vì một bản đồ chính thức với các chi tiết nhỏ. Bản đồ được tạo bằng SVG và có thể được tùy chỉnh theo nhiều cách bao gồm thay đổi màu sắc của khu vực, thêm cửa sổ bật lên và đánh dấu bản đồ tùy chỉnh.
- Nguồn dữ liệu bản đồ: Google Maps
- Phụ thuộc: không có
- Giấy phép: Đọc Google Maps TOS
Maplace
Maplace là một plugin jQuery để tạo bản đồ thông qua API Google Maps v3. Maplace hoạt động trên tất cả các trình duyệt, bao gồm cả IE6. Vì vậy, đây là một plugin tuyệt vời khác đáng để bạn chú ý nếu bạn muốn xây dựng bản đồ theo cách dễ dàng nhất có thể.
- Nguồn dữ liệu bản đồ: Google Maps
- Phụ thuộc: jQuery
- Giấy phép: Giấy phép MIT
Stately
Stately là thư viện JavaScript được phát triển để tạo bản đồ Hoa Kỳ. Thư viện tương đối nhẹ vì bạn có thể thêm các yếu tố tương tác lên trên các bản đồ đã tạo của mình.
- Nguồn dữ liệu bản đồ: Stately / SVG
- Phụ thuộc: không có
- Giấy phép: Giấy phép MIT
GeoComplete
GeoComplete là một thư viện JavaScript riêng biệt. Thư viện sẽ thêm một trường đầu vào cùng với bản đồ, trường này sẽ hiển thị các đề xuất về thành phố, quốc gia hoặc tiểu bang khi bạn nhập.
- Nguồn dữ liệu bản đồ: Google Maps
- Phụ thuộc: jQuery
- Giấy phép: Giấy phép MIT
Map Tools
Công cụ Bản đồ cung cấp API trực quan để thêm Google Maps. Nó hỗ trợ tải dữ liệu JSON được định dạng địa lý như TopoJSON và GeoJSON để hiển thị bản đồ. Hơn hết, bạn có thể thêm các điểm đánh dấu động mà tôi nghĩ sẽ làm cho bản đồ sinh động hơn, chèn nội dung HTML với các biến.
- Nguồn dữ liệu bản đồ: Google Maps
- Phụ thuộc: GeoJSON / TopoJSON
- Giấy phép: Giấy phép MIT
OpenLayers
OpenLayers là một khung JavaScript mã nguồn mở hiệu suất cao để xây dựng các bản đồ tương tác bằng cách sử dụng các dịch vụ lập bản đồ khác nhau. Bạn có thể chọn nguồn lớp bản đồ bằng cách sử dụng lớp lát gạch hoặc lớp vectơ từ một số dịch vụ bản đồ.
OpenLayer sẵn sàng cho thiết bị di động, phù hợp để xây dựng bản đồ trên các thiết bị và trình duyệt. Bạn có thể sử dụng CSS để có giao diện khác cho bản đồ của mình.
- Nguồn dữ liệu bản đồ: OpenStreetMap
- Phụ thuộc: không có
- Giấy phép: Không xác định
Leaflet
Các nhà phát triển đã cung cấp cho Leaflet các chức năng cơ bản để hoạt động hoàn hảo, giữ kích thước nhỏ gọn, hoàn hảo cho các thiết bị di động.
Leaflet có hầu hết các tính năng bản đồ trực tuyến mà bạn cần: lớp xếp, cửa sổ bật lên, điểm đánh dấu và các lớp vectơ miễn phí như đường đa giác, đa giác, hình tròn hoặc hình chữ nhật. Nó đi kèm với các thiết kế mặc định đẹp mắt mặc dù bạn có thể tùy chỉnh phong cách bằng cách sử dụng CSS3 một cách dễ dàng.
- Nguồn dữ liệu bản đồ: OpenStreetMap
- Phụ thuộc: không có
- Giấy phép: Không xác định
