embed

チュートリアル 段4：インタラクションを足す

前の段でできたこと

段3で、地図のスタイルを差し替えました。この段では、マーカーをクリックしたらポップアップが出るインタラクションを追加します。

ポップアップを出す仕組み

embed では、.geolonia の div の中に HTML を書くと、それがマーカーのポップアップになります。中心にマーカーが立ち、クリックすると中身がポップアップで開きます。

<style>
  .geolonia { width: 100%; height: 100vh; }
</style>

<div class="geolonia" data-lat="35.681236" data-lng="139.767125" data-zoom="15">
  <strong>東京駅</strong><br>JR・地下鉄各線
</div>

<script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>

ポイントは2つです。

上のコードは、そのまま下で動いています。マーカーをクリックしてみてください。

embed のポップアップの制約

embed のポップアップは中心の1つのマーカーだけに付けられます。複数のマーカーそれぞれにポップアップを付けたい場合は、JavaScript による実装が必要です（suite や react のチュートリアルを参照してください）。

1つのポップアップでも、「この場所は何？」を伝えるには十分です。たとえば店舗ページに埋め込む地図なら、住所や営業時間をポップアップに入れると分かりやすくなります。

GeoJSON と組み合わせる

段2で使った data-geojson と、ポップアップ（子要素）を同時に使うこともできます。データの点が複数表示され、さらに中心にポップアップ付きのマーカーが立ちます。

<div class="geolonia"
     data-lat="35.68" data-lng="139.75" data-zoom="11"
     data-geojson="/data/sample-spots.geojson">
  <strong>東京の主要スポット</strong><br>5地点を表示しています
</div>

動いたか確認する

マーカーをクリックして、書いた HTML の内容がポップアップに出れば成功です。

うまくいかないとき
  • マーカーが出ない → data-marker="off" が残っていないか確認。ポップアップを使うときはマーカーが必要です。
  • ポップアップが空 → div の子要素が空になっていないか確認。空白文字だけではポップアップは開きません。
  • 子要素を書いたが反映されない → div タグの閉じ忘れに注意。<div class="geolonia" ...>内容</div> のように正しく閉じてください。

次は

地図にインタラクションを追加できました。ここまでで、地図の表示、場所の指定、データの表示、スタイルの変更、ポップアップと、embed でできることは一通り使えるようになっています。最後の段5：公開するで、API キーを取得して本番公開します。