DigiPress

Highly Flexible WordPress Theme

メニュー

gmaps : Google Mapsの地図を表示

gmaps : Google Mapsの地図を表示

Googleマップから住所を入力するだけでページに簡単にGoogleマップを表示できます。
その他、表示する地図のサイズ、色合いや明るさ、ポップアップに表示するテキストなどを指定することができます。


Google API キーを取得

Google マップを表示するには、Google Cloud Platform (以降 GCP) にてプロジェクトを作成し、Google マップを表示するための API が有効になっている API キーが必要となります。

Google アカウントの準備

GCP を利用するには、任意の Google アカウントが必要です。
Google アカウントをお持ちでない場合は、事前に作成しておきます。

Google アカウントを作成

GCP コンソールにログイン

用意した Google アカウントで GCP コンソールにログインします。

GCP プロジェクトを作成

画面左上にある「プロジェクトの選択」からポップアップ画面を開き、右上にある「新しいプロジェクト」をクリックします。

適当なプロジェクト名を入力し、「作成」をクリックします。

APIの有効化

対象プロジェクトの API のダッシュボードにアクセスし、「API とサービスの有効化」をクリックします。

検索ワードに「geocoding」と入力し、ヒットした「Geocoding API」と「Maps JavaScript API」の両方を有効にします。


認証情報の作成

対象プロジェクトの API の認証情報にアクセスし、認証情報タブから「API キー」を選択します。

引き続き、生成されたAPI キーを制限します。

適当な API キー名を入力し、「アプリケーションの制限」から「HTTP リファラー (ウェブサイト)」を選び、Google マップを表示する対象サイトの URL をワイルドカード( * )付きで指定します。
例 : sample.com/*

API キーの取得

再び「認証情報」の画面から、先ほど作成した API キーをコピーします。

テーマオプションにて API キーを登録・保存

取得した Google Maps API キーをテーマ側で利用できるように保存します。

カスタマイザー対応テーマの場合

カスタマイザー(【外観】→【カスタマイズ】)を開き、【サイト一般設定】→【Google API設定】→【GoogleマップAPIキー】にて取得したAPIキーを貼り付け、保存します。

Luminous以前のテーマの場合

【詳細設定】→【サイト一般動作設定】→「GoogleマップAPIキー設定」にて取得したAPIキーを貼り付け、保存します。

以上でショートコードを利用してGoogleマップを表示する準備は完了です。


住所と高さのみを指定した例

このショートコード

[gmaps address="愛知県名古屋市中村区名駅1丁目1−4" height=360px]

マップの色合い、ポップアップ、ズームを無効にした例

このショートコード

[gmaps address="愛知県名古屋市中村区名駅1丁目1−4" height=360px title="サンプル地図" text="名古屋駅" hue=#29B5FF zoom=16 nozoom=true visiblity=on animation=drop]

指定可能なパラメータ

address ※必須
表示したい地図の住所、または代表的な名称を指定します。

このパラメータは必須です。

例 : address=”愛知県名古屋市中村区名駅1丁目1−4”, address=”JR名古屋駅” など。

lat
表示したい地図の「緯度」を数値で指定します。
このパラメータは「lng(経度)」パラメータとセットで指定する必要があります。

latとlngで緯度・経度を指定している場合は、addressパラメータを指定しても無視されます。

例 : lat=”35.681298″。

lng
表示したい地図の「経度」を数値で指定します。
このパラメータは「lat(緯度)」パラメータとセットで指定する必要があります。

latとlngで緯度・経度を指定している場合は、addressパラメータを指定しても無視されます。

例 : lng=”139.766247″。

key
Google Maps APIのAPIキーを指定します。

未指定の場合は「詳細設定」→「サイト一般動作設定」→ “GoogleマップAPIキー設定” に指定されているAPIキーが利用されます。

APIキー取得について

Googleマップの「ブラウザ用APIキー」の取得方法については、“GoogleマップAPIキー設定”オプションの「説明/注意」欄に記載されています。

注意事項

  • 2016/6/22以降、Googleマップ用ショートコードで地図を表示する場合は、APIキーの指定がないと地図は表示されません。
    必ずこの key パラメータか、“GoogleマップAPIキー設定” にてAPIキーを指定しておいてください。
  • GoogleマップAPIの仕様により、25,000表示/日がGoogleマップの表示回数の上限となり、それ以上は有料となります(Googleのアナウンス)。

例 : key=”AilkmsaodfjokAOKFDnkosKDSFJoj”

width
表示するGoogleマップの幅をピクセル数値 または パーセンテージにて指定します。
未指定の場合は、width=”100%” が指定されます。

例: width=350px, width=70% など。

height
表示するGoogleマップの高さをピクセル数値 または パーセンテージにて指定します。
未指定の場合は、height=350px (ピクセル)が指定されます。

例: height=300px, height=10% など。

drag
地図上をドラッグした際に連動して地図が動くようにする場合に「1」または「true」を指定します。

未指定の場合は「0」(ドラッグ操作無効)が設定されます。

例 : drag=1, drag=true

title
地図のマーカーをホバーした際に表示されるタイトルを指定できます。
capture 2016-02-11 11.58.32

例 : title=”本社ビル”

marker
表示する地図の中心にマーカーを表示しない場合に「false」または「0」を指定します。

規定(未指定の場合)はマーカーを表示します。

例 : marker=0, marker=false

animation
地図が表示されたときにマーカーをアニメーションさせて表示する場合に、そのアニメーションの種類を「bounce」(飛び跳ね)または「drop」(上からドロップ)のどちらかを指定します。

例 : animation=drop

text
マーカーの代わりに地図の中心地に任意のテキストを吹き出し付きで表示する場合にそのテキストを指定します。
capture 2016-02-11 12.09.58

例 : text=”本社ビル”

zoom
表示する地図のズームサイズを数値(0以上)で指定します。
数値が大きいほど拡大率が上がり、小さいほど縮小します。

未指定の場合は「18」が適用されます。

例 : zoom=16

maxzoom
ユーザーが表示された地図を拡大できる最大サイズを設定する場合に、そのレベルを数値で指定します。

例 : maxzoom=20

minzoom
ユーザーが表示された地図を縮小できる最小サイズを設定する場合に、そのレベルを数値で指定します。

例 : minzoom=8

nozoom
ユーザーが地図をズーム(拡大/縮小)できないようにする場合に「true」または「1」を指定します。
表示サイズはzoomのサイズ固定です。

例 : nozoom=1

visiblity
地図上の様々な要素を表示する場合は「on」を指定します。

未指定の場合は要素を表示しないシンプル(simplified)な地図スタイルです。

Style Map Wizardで表示イメージ確認

例 : visiblity=on

hue
地図全体の色温度(色合い)を付ける場合に、16進数のカラーコードで指定します。

Style Map Wizardで表示イメージ確認

例 : hue=#29B5FF

saturation
地図全体の彩度を調整する場合に、-100 から 100 の間で指定します。
数値が低いほど色あせた(モノクロに近い)状態になり、高いほど色濃くなります。

未指定の場合は「0」です。

Style Map Wizardで表示イメージ確認

例 : saturation=-30

gamma
地図全体のガンマ補正をする場合に 0.01 から 9.99 の間で指定します。

未指定の場合は「1」(基準値)です。

Style Map Wizardで表示イメージ確認

例 : gamma=0.52

lightness
地図全体の明るさを調整する場合に -100 から 100 の間で指定します。
数値が低いほど暗く、高いほど明るくなります。

未指定の場合は「1」(基準値)です。

Style Map Wizardで表示イメージ確認

例 : lightness=24

invert
地図のカラー状態を反転させる場合に「1」または「true」を指定します。

Style Map Wizardで表示イメージ確認

例 : invert=1, invert=true

class
表示するGoogle Mapsを括る要素(div)に任意のCSSセレクタ(class)を追加したい場合はそのセレクタ名を指定します。

例 : class=”mymap”

style
表示するGoogle Mapsを括る要素(div)にインラインでCSSを指定したい場合に、そのstyle属性の値となるCSSを記述します。

例 : style=”margin:40px 0;border:15px solid rgba(255,255,255,0.2);”

地図が表示されない場合

Googleマップショートコードで地図が表示されない場合は、様々な原因が考えられます。
まずはブラウザ(Chrome等)のコンソールにてGoogle Maps APIのエラーメッセージが表示されていないか確認してください。

エラーメッセージ確認方法

エラー内容

Google Maps API error: InvalidKeyMapError
APIキーが未指定か、指定されたAPIキーが無効です。
DigiPressの「詳細設定」で指定されているGoogleマップAPIキーに誤りがないか確認してください。
APIキーの前後に余分なスペースがないこともよくお確かめください。

APIキーを登録していない場合は、Google Maps APIからAPIキーを発行し、DigiPressの「詳細設定」→「サイト一般動作設定」の “GoogleマップAPIキー設定” に保存してください。

Google Maps API error: RefererNotAllowedMapError
表示しようとしているサイトのドメインは、Google Maps APIの認証情報にAPIリクエストを受け付けるドメインとして登録されていません。
Google APIの「認証情報」にアクセスし、登録されているAPIキーのリクエストを受け付けるドメインに対象サイトが含まれていない場合は、「認証情報(APIキー)」を作成し、HTTPリファラーに表示するサイトのドメインを追加し保存してください。


なお、設定が有効になるまでには、最大で 5 分かかることがあります。

その他のエラーや警告についての説明は、Google Maps APIのドキュメントを参照してください。