ページに地図

ピン付きインタラクティブ地図——学校、旅行、グラウンド向け。

見てみよう：Leaflet——無料地図

Leaflet は何百万サイトが使う地図ライブラリ。無料、<head> に2行で追加：

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

地図用の箱と数行 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>

3ステップ：地図作成、ベースレイヤー、ピン。L.marker を繰り返せばピンはいくつでも。

💡

ライブラリ は誰かが書いたコードを借りるもの——全部自分で書かなくていい。Leaflet がパン、ズーム、モバイルタッチを担当。地図に何を見せるかだけ伝える。

リストから複数ピン

場所が複数なら配列に入れてループ——天気と同じ：

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);
}

やってみよう 💪

🏫 学校サイト——答え

「連絡先」ページに学校の位置の地図。ボーナス：体育館かグラウンドの2つ目のピン。

🙋 個人サイト——答え

「My Places」地図：住んでる場所（おおよそ——街で十分！）、好きな遊び場、休暇先。

🌍 旅行日記——答え

スターレッスン：リストからピンを付けた全旅行の地図。各ポップアップから旅行記へリンク。

⚽ クラブサイト——答え

「Where We Play」地図：ホームグラウンド + 相手のグラウンド。遠征の保護者に喜ばれる。

⚠️

プライバシー： 正確な自宅住所をサイトに載せない。町の中心広場のピンで十分。

✅

確認： パン・ズームできる地図、ポップアップ付きピンが2つ以上。

このレッスンのまとめ

ライブラリ（Leaflet など）が既製の超能力を貸す。
地図 = 地図 + ベースレイヤー + ピン。
配列の場所リスト + ループ = どんなサイズの地図も。

このレッスンは有料レベルの一部です

見てみよう：Leaflet——無料地図

リストから複数ピン

やってみよう 💪

このレッスンのまとめ