はじめての地図を設置

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

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

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

CSS で、要素に高さが指定されていないと地図は表示されないので、style 属性で height:300px を指定しています。（style タグや CSS ファイルで指定することも可能です）

<div class="geolonia" style="height:300px;"></div>

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

CodePen でサンプルコードを編集

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

• </body> タグの直前に Embed API のコードが挿入されていること。
• API キーが正しいこと。
• file:///C:/… のようにファイルを直接ブラウザで開くと動作しません。Web Server for Chromeといったツールを使ったりして、httpでアクセスする必要があります。

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

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

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

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

<div
  class="geolonia"
  data-lat="34.652499"
  data-lng="135.506306"
  data-zoom="16"
  style="height:300px;"
></div>

CodePen でサンプルコードを編集

また、以下のボタンをクリックすると簡単に HTML を取得することができます。

地図を設置するための HTML を生成する

マーカーを非表示にする

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

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

<div
  class="geolonia"
  data-lat="34.652499"
  data-lng="135.506306"
  data-zoom="16"
  data-marker="off"
  style="height:300px;"
></div>

CodePen でサンプルコードを編集

ポップアップを表示する

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

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

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

CodePen でサンプルコードを編集

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

地図の角度を指定する

以下のように data-pitch 属性を使用することで地図の角度を変えることができます。最大値は 60 です。

<div
  class="geolonia"
  data-lat="34.652499"
  data-lng="135.506306"
  data-zoom="16"
  data-pitch="60"
  style="height:300px;"
>ここは <strong>通天閣</strong> です。</div>

CodePen でサンプルコードを編集

チュートリアルは以上です。

次にクックブックでは、Geolonia地図でできること、それらを具体的にどう実装するかを紹介しているのでご参照ください。