wordpressのテンプレートparallax oneで使われている Intergeo Maps の設定方法

wordpressのテンプレートparallax oneを使ったホームページを作成しているが、この中のフッター部に表示されるgoogle mapはIntergeo Mapsというプラグインが組み込まれているので、このプラグインの設定ができないとgoogle mapを表示できないということがわかった。

201609017追加情報:Intergeo Mapsが1.1.0にアップデート後に使えなくなりました(具体的には白い画面しか表示されなくなると言う状態に陥る)が、サーバーのPHSのバージョンを5.6にアップデートしたら解決しました。

まず、プラグインからIntergeo Mapsというプラグインを表示させると地図が表示された後にエラーメッセージが表示されて地図が表示されないという現象にでくわす。

intergeo_maps_error

どうやら何かで認証されないと使えないようだ。英語のFAQや質問を読んでもよく判らなかったので、いろいろ独自に調べた結果、google mapを使うにはgoogle map APIの認証キーを取得しなければ利用できないということが判明した。

google mapのAPI認証キーを取得するには下記urlが詳しい。

Google Maps の APIキー を簡単に取得する

取得したキーを[プラグイン]→[インストール済みプラグイン]→[Intergeo Maps – Google Maps Plugin]→[Settings]を開き、Maps API Keyの入力エリアに貼り付け、[変更を保存]のボタンをクリックする。

これで準備は完了。

この後、[メディア]→[Intergeo Maps]をクリックしてヨーロッパの地図が表示されれば利用可能となります。

Add Newをクリックすると大きな画面の地図が表示されるので、下にあるGo to addressのボタンをクリックし、中心にしたい住所(漢字でも可能)を入力しGoボタンをクリックすると該当の住所地点が(赤丸)で表示されるので、あとは拡大をしてある程度のサイズになったらAdd Markerボタンをクリックするとマーカーとして登録する画面が表示されるので必要項目を入力してupdateボタンをクリックする。下の画像は東京都庁をマーカーとして登録した画面。

intergeo_maps_mark

マーカー登録ができたら下にあるCreate the Mapボタンを押して地図データを作成する。画面が変わり下記の地図画面が表示される。

intergeo_maps_mark_map必要なのは反転している

[intergeo id=”0UTM”][/intergeo]

の部分なのでこの部分をコピーし、[外観]→[カスタマイズ]→[Contact section]→[Map short code]に貼り付け、[保存して公開]ボタンをクリックする。右側に表示される画面を下の方にスクロールすると作成した地図が表示されるようになります。

intergeo_maps_mark_map_sample

以上でword pressのparallax oneで利用されているintergeo mapsの利用方法説明を終わります。