はじめての地図を設置

Geolonia の地図をページに設置する方法を紹介します。

はじめての地図を設置する

Geolonia の Embed API は、ページ内の geolonia という値の class 属性をもつすべての要素に対して自動的に地図を挿入します。

Embed API 用の <script /> タグを設置したページの任意の場所に、以下のコードを設置してください。

<div class="geolonia"></div>

正しく Embed API が読み込まれていれば、以下のように地図が表示されます。

もし、地図が表示されていなければ、以下の内容を確認してください。

  • </body> タグの直前に Embed API のコードが挿入されていること。
  • API キーが正しいこと。
  • CSS で、その要素に高さが指定されていること。(高さが 0px では地図は表示されません。)

Geolonia Sandbox 上で実際のコードを試すこともできます。

地図の中心地点の緯度経度を指定する

では地図の中心地点を指定してみましょう。

地図の中心地点は data-lat という属性に緯度を、data-lng という属性に経度をセットすることで指定することができます。

さらに、data-zoom は地図のズームレベルです。数字が大きくなるほどズームインしていき、最大値は 22 です。

<div
  class="geolonia"
  data-lat="34.652499"
  data-lng="135.506306"
  data-zoom="16"
></div>

地図の座標を取得するための Geo コーディング API はただいま準備中です。

マーカーを非表示にする

上の地図では、指定した座標にマーカーが表示されています。

このマーカーは、data-marker という属性の値に off を指定することで非表示にすることができます。

<div
  class="geolonia"
  data-lat="34.652499"
  data-lng="135.506306"
  data-zoom="16"
  data-marker="off"
></div>

ポップアップを表示する

マーカーをクリックした際に任意のコンテンツをポップアップで表示したい場合が多いと思います。

その場合は、以下の HTML の例のように <div class="geolonia" ...></div> の中にポップアップで表示したいコンテンツを挿入してください。

<div
  class="geolonia"
  data-lat="34.652499"
  data-lng="135.506306"
  data-zoom="16"
>ここは <strong>通天閣</strong> です。</div>
ここは 通天閣 です。

ポップアップ用のコンテンツでは、HTML が使用できます。