地図のコントロールをカスタマイズ

コントロールとは？

Geolonia の地図には地図の操作を表示するためのボタンや、地図の現在の状態を示す情報などの、いくつかの要素が表示されています。

これらは、コントロールと呼ばれ、以下のコントロールについては表示/非表示をカスタマイズすることが可能です。

• data-navigation-control - 地図のズームレベルを変えられるボタン。デフォルトではこのコントロールだけ表示されています。
• data-geolocate-control - ユーザーの現在位置を取得して、地図をそこに移動するためのボタン。
• data-fullscreen-control - 地図を全画面で表示するためのボタン。
• data-scale-control - 地図のスケールを左下に表示。

以下のサンプルは、これらのコントロールをすべて有効化しています。

<div
  class="geolonia"
  data-lat="34.704395"
  data-lng="135.494771"
  data-zoom="14"
  data-navigation-control="on"
  data-geolocate-control="on"
  data-fullscreen-control="on"
  data-scale-control="on"
>グランフロント</div>

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

data-navigation-control - デフォルトのボタン

data-navigation-control は、地図のズームレベルや方向、角度を調整するためのコントロールで、デフォルト値は on です。

<div
  class="geolonia"
  data-lat="34.704395"
  data-lng="135.494771"
  data-zoom="14"
  data-navigation-control="on"
>グランフロント</div>

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

data-navigation-control はデフォルト値が on なので、以下のように省略しても結果は同じです。

<div
  class="geolonia"
  data-lat="34.704395"
  data-lng="135.494771"
  data-zoom="14"
>グランフロント</div>

非表示にしたい場合は、値を off にしてください。

<div
  class="geolonia"
  data-lat="34.704395"
  data-lng="135.494771"
  data-zoom="14"
  data-navigation-control="off"
>グランフロント</div>

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

data-geolocate-control - ユーザーの位置情報を取得

data-geolocate-control は、ユーザーの位置情報を取得し、地図をその位置に移動するためのボタンです。

<div
  class="geolonia"
  data-lat="34.704395"
  data-lng="135.494771"
  data-zoom="14"
  data-navigation-control="off"
  data-geolocate-control="on"
>グランフロント</div>

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

※ わかりやすくするために data-navigation-control を off にしています。

data-fullscreen-control - フルスクリーンで地図を表示するためのボタン

data-fullscreen-control は、地図をフルスクリーンで表示するためのボタンです。

<div
  class="geolonia"
  data-lat="34.704395"
  data-lng="135.494771"
  data-zoom="14"
  data-navigation-control="off"
  data-fullscreen-control="on"
>グランフロント</div>

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

※ わかりやすくするために data-navigation-control を off にしています。

data-scale-control - 地図のスケールを表示

data-scale-control を on にすると、地図の左下に地図のスケールが表示されます。

<div
  class="geolonia"
  data-lat="34.704395"
  data-lng="135.494771"
  data-zoom="14"
  data-navigation-control="off"
  data-scale-control="on"
>グランフロント</div>

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

※ わかりやすくするために data-navigation-control を off にしています。

OpenStreetMap および Geolonia へのリンクのコントロールについて

地図の右下および左下に表示されている OpenStreetMap および Geolonia へのリンクについては、ご利用規約により非表示にしないことをお願いしております。