embed

チュートリアル Step 4: イベント処理とポップアップ

この Step の前提

この Step では、マーカーのクリックに応じてポップアップを表示します。コード例は div とその子要素だけで完結する独立した例であり、Step 2 の GeoJSON と Step 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点です。

div の子要素がそのままポップアップの内容になります。HTML であるため、太字やリンクも記述できます。
子要素を記述すると、中心にマーカーが自動的に表示されます（data-marker="off" を指定した場合を除く）。

上のコードは、そのまま下で動作しています。マーカーをクリックすると、ポップアップが開きます。

embed のポップアップの制約

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

用途が1地点の説明に限られる場合、この制約は問題になりません。たとえば店舗ページに埋め込む地図では、住所や営業時間をポップアップに記述します。

GeoJSON と組み合わせる

Step 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> の形で記述します。

次の Step

以上で、イベント処理とポップアップの実装は完了です。ここまでで、地図の表示、場所の指定、データの表示、スタイルの変更、ポップアップという embed の主要な機能を扱いました。最後の Step 5: API キーの設定と本番公開で、API キーを発行して本番環境に公開します。