Google Maps

Google Maps を表示する組み込みJSです。

この組み込みJSを活用することで、 Google Maps Static API を活用して静的に表示している Google Maps を Google Maps JavaScript API を活用した動的な Google Maps に置き換えて表示することができます。

Google Maps Static API 及び、Google Maps JavaScript API のご利用にあたっては、請求先アカウントと 有効なプロジェクトが必要です。詳しくは、Cloud Console での設定をご覧ください。

Google Maps を利用するには、Cloud Console で発行された API キーを コンフィグ > プロパティ設定 から Google Maps API Key に設定する必要があります。

使い方

Google Maps Static API を利用した Google マップ画像を表示している img 要素の class 属性に対して js-s2d-ready を設定します。

例では、Google Maps Static API の URL パラメーターで、緯度35.172775,136、軽度136.887466 の地点を表示しています。また、markers パラメーターにて、マーカーの位置情報を | 区切りで3つ指定しています。

Google Maps Static API で | を指定する場合には URLエンコードする必要があります。そのため、%7C と記述します。

また、key パラメーターには コンフィグ > プロパティ設定 で設定した Google Maps API Key をグローバル変数で指定しています。

Google Maps Static API の URLに指定できる URL パラメーターに関して、詳しくは以下のページをご確認ください。

さらに、alt 属性を使えば、マーカーそれぞれにメッセージを表示することも可能です。メッセージを区切りたい場合は、[[:split:]]このような記号を使って分割します。

<img
  data-lazy="true"
  src="https://maps.googleapis.com/maps/api/staticmap?center=35.172775,136.887466&zoom=15&size=400x300&maptype=roadmap&markers=35.170394,136.887383%7C35.176559,136.885409%7C35.172762,136.887447&key=%{GOOGLE_API_KEY}"
  alt='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  width="400"
  height="300"
  class="js-s2d-ready"
>

マーカーアイコンをカスタマイズする

デフォルトでは、Google Maps API 標準のマーカーアイコンが利用されますが、独自のカスタムアイコン画像をマーカーアイコンとして利用することも可能です。

独自のカスタムアイコン画像をマーカーアイコンとして利用するためには、 markers パラメーターの icon 記述子を利用して、任意のカスタムアイコン画像のURLを指定する必要があります。

以下は、https://developers.google.com/static/maps/documentation/javascript/images/custom-marker.png というURLで表示される以下の画像をマーカーアイコンとして利用するためのサンプルコードになります。

独自のカスタムアイコンとして利用する駐車場アイコン

独自のカスタムアイコンとして利用する駐車場アイコン

<img
  data-lazy="true"
  src="https://maps.googleapis.com/maps/api/staticmap?center=35.172775,136.887466&zoom=15&size=400x300&maptype=roadmap&markers=%7Cicon:https://developers.google.com/static/maps/documentation/javascript/images/custom-marker.png%7C35.170394,136.887383%7C35.176559,136.885409%7C35.172762,136.887447&key=%{GOOGLE_API_KEY}"
  alt='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  width="400"
  height="300"
  class="js-s2d-ready"
>

表示領域（viewport）に入るまで、組み込みJSの実行を遅延させる

Google Maps の地図が画面の下部に存在する場合、組み込みJSの実行を、表示領域（viewport）に入るまで遅延させることで、パフォーマンスを向上させることが可能です。

data-lazy 属性の値に true を指定することで、組み込みJSの実行を遅延させることができます。

<img
  data-lazy="true"
  src="https://maps.googleapis.com/maps/api/staticmap?center=35.172775,136.887466&zoom=15&size=400x300&maptype=roadmap&markers=35.170394,13ｂｂ6.887383%7C35.176559,136.885409%7C35.172762,136.887447&key=%{GOOGLE_API_KEY}"
  alt='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
  width="400"
  height="300"
  class="js-s2d-ready"
>

設定

この機能の設定は、/js/config.js で設定されています。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。

設定項目 説明 デフォルト
s2dMark Google Maps を表示する要素をセレクター形式で設定します。
ここで設定した要素は、Google Maps Static API で表示した画像をクリックすることで、 Google Maps JavaScript API を活用した動的な Google Maps に置き換えて表示します。
 '[class^="column-map-"]>img:not(.js-s2d-ready)'
s2dReadyMark Google Maps を表示する要素をセレクター形式で設定します。 'img.js-s2d-ready'
s2dMaxSize s2dMark で設定した要素の width 属性が s2dMaxSize で設定した数値よりも大きい場合、
要素が読み込まれたら即座に  Google Maps Static API で表示した画像を Google Maps JavaScript API を活用した動的な Google Maps に置き換えて表示します。
 640
s2dPinShadowImg マーカーアイコンに設定する影画像を設定できます。 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png'
s2dRegion Google Maps JavaScript API を読み込む際に指定するリージョンを設定できます。
詳しくは Google Maps JavaScript API のドキュメントをご確認ください。
 'JP'
s2dStyle Google Maps JavaScript API で表示する地図にカスタマイズしたスタイルを適用できます。
詳しくは Google Maps JavaScript API のドキュメントをご確認ください。
 []

レイアウト

ビューアー

ポストインクルード

フォーム

リンク

スタイル

編集画面

パフォーマンス改善

会員制サイト