Xem thử: Leaflet – bản đồ miễn phí
Leaflet là thư viện hàng triệu website dùng để hiện bản đồ. Miễn phí và thêm bằng hai dòng trong <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>Rồi chỉ cần hộp cho bản đồ và vài dòng JavaScript:
<div id="mapa" style="height: 400px; border-radius: 12px;"></div>
<script>
// Coordinates for the map's center and zoom level (bigger number = closer)
const mapa = L.map('mapa').setView([49.19, 16.61], 13);
// Map tiles from OpenStreetMap (free)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
}).addTo(mapa);
// A pin with a popup
L.marker([49.19, 16.61])
.addTo(mapa)
.bindPopup('<strong>We are here!</strong>');
</script>Ba bước: tạo bản đồ, thêm lớp nền, đặt ghim. Thêm bao nhiêu ghim cũng được – chỉ lặp L.marker.
Thư viện là code người khác viết mà bạn mượn, để không phải viết mọi thứ từ đầu. Leaflet xử lý kéo, zoom và cử chỉ cảm ứng trên di động. Bạn chỉ báo bản đồ hiện gì.
Nhiều ghim từ danh sách
Khi có nhiều địa điểm, lưu trong mảng và lặp – giống thời tiết:
const mista = [
{ nazev: 'Šumava 2025', lat: 49.06, lng: 13.61 },
{ nazev: 'Lipno – camping trip', lat: 48.63, lng: 14.23 },
{ nazev: 'Prague – school trip', lat: 50.09, lng: 14.42 },
];
for (const misto of mista) {
L.marker([misto.lat, misto.lng]).addTo(mapa).bindPopup(misto.nazev);
}Đến lượt bạn 💪
🏫 Website trường học – giải pháp
Bản đồ vị trí trường trên trang “Liên hệ”. Bonus: ghim thứ hai cho phòng gym hoặc sân dùng cho giờ thể dục.
🙋 Website cá nhân – giải pháp
Bản đồ “Nơi của tôi”: nơi bạn sống (chỉ xấp xỉ – thành phố là đủ!), sân chơi yêu thích, nơi đi nghỉ.
🌍 Nhật ký du lịch – giải pháp
Đây là bài ngôi sao: bản đồ tất cả chuyến đi với ghim từ danh sách. Mỗi popup có thể link đến bài viết chuyến đi.
⚽ Website câu lạc bộ – giải pháp
Bản đồ “Nơi chúng tôi chơi”: sân nhà + sân đối thủ. Phụ huynh khách sẽ thích.
Quyền riêng tư: không bao giờ đặt địa chỉ nhà chính xác lên website. Ghim ở quảng trường thị trấn là đủ rồi.
Kiểm tra: Website có bản đồ kéo được, zoom được với ít nhất hai ghim có popup.
Những điều cần nhớ
- Thư viện (như Leaflet) cho bạn siêu năng lực có sẵn.
- Bản đồ = bản đồ + lớp nền + ghim.
- Danh sách địa điểm trong mảng + vòng lặp = bản đồ mọi kích cỡ.
© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung