【2016年秋版】GoogleMapに複数の吹き出しのある地図をWordPressのショートコードで表示する

「GoogleMapに複数の吹き出しのある地図をWordPressのショートコードで表示する」という記事を2016年の2月16日に書いたのですが、その4ヶ月後の6月からGoogle mapを利用するときにAPIキーが必要になりました。そのため、blogに書いた内容では表示できないことになっていたようです。
ということで、2016年秋版のGoogleMapに複数の吹き出しのある地図をWordPressのショートコードで表示する、記事を書いてみました。

Google Mapを利用するために必要になるAPIキーの取り方

最初に、Google Mapを利用するために必要になるAPIキーの取り方について書きます。

https://developers.google.com/maps/documentation/javascript/get-api-key

上記のAPIキーを取得するページに行き、

キーの取得 をクリック

続行 をクリック

この画面になります。

名前のところにあとで自分でわかりやすいような名前をつけます。キーの制限HTTPリファラー(ウェブサイト)にチェックを入れて、この HTTPリファラー(ウェブサイト)からのリクエストを受け入れるというところにある入力欄に、使いたいWebサイトのURLを入力します。

作成 をクリック

ポップアップでこの画面が表示されます。自分のAPIキーというところにあるキーをコピーしてテキストファイルなどで保存しておきます。このキーがGoogleMapを利用する時に使えるAPIキーです。

子テーマにGoogle Mapを表示するコードやライブラリを追加する

利用している子テーマにGoogle Mapを表示するコードやライブラリを追加します。

追加するファイルやフォルダはこのような構成になっています。

Gmapsのライブラリを子テーマにいれる

GMaps.jsのファイル一式をダウンロードして子テーマにいれます。

https://github.com/hpneo/gmaps

こちらのページの

Clone or download をクリックして、Download ZIP をクリック

gmaps-master.zip というファイルがダウンロードされるので解凍します。gmaps-masterというフォルダにgmaps-masterというフォルダがあります。このフォルダ名を gmaps に変更してから子テーマにフォルダごとコピーします。

子テーマのfunctions.phpにコードを追加する

子テーマfunctions.phpにコードを追加します。

取得したgooglemapのAPIキー というところには、実際に取得したAPIキーで置き換えます。

style.cssに追加する

子テーマのstyle.cssにmap表示に必要なCSSを追加します。

Gmapを表示するために必要なjsを追加します

Gmapを表示するために必要なjsを追加します。

gmaps_data_point.js 吹き出しを表示するjs
gmaps_data.js 地図を表示するjs

追加した2つのファイルはgmaps_ryus.zipこれをダウンロードして解凍してください。

解凍してできたgmaps_data_point.jsgmaps_data.jsを子テーマの直下に置きます。

マップや地点をショートコードで表示する

これで準備ができたのでマップや地点をショートコードで表示します。

地図だけを表示する

地図だけを表示してみます。

このように緯度経度とzoomを数値として指定したショートコードで投稿コンテンツを作成すると、

このような地図が表示されます。

複数の吹き出しを表示する

複数の吹き出しを表示するショートコードはこんな感じです。

  • ご注意:上記はわかりやすく1行ずつ改行して書いてありますが、実際にこの形で書くと <br> が1行ずつ入ってしまうため地図の上部に書いた行数分の <br> が入ります。入らないようにするには改行せずにショートコードを続けて書くようにしてください

投稿などでこのようにショートコードを指定します。各吹き出しはgmap_data_setで指定します。idは1から順に指定します。名前、緯度経度を指定して、バルーンの背景色を青ではなく緑にしたい場合はclass=”overlay_cafe” と付け加えておきます。これを表示すると、

こんな感じに複数の地点を表示する地図が表示ができました(^^)/

まとめ:技術は日進月歩。最新の状態でできるかどうかはとても大変

以前の記事を書いてからたった4ヶ月で、使えなくなっていたようです(>_<)。いつもいつも技術は日進月歩なので気がついてかつ時間があってかつ可能であれば今回のように最新の記事を書くことができますが、全部の記事を検証するのは無理なので古い記事は参考程度としていただくと助かります。

また、最近頻発している状況があるのですがブログにあるコードをコピーして動かしたときにエラーになってしまうということがあります。

原因は 2つ以上の半角スペースが全角スペースなどの文字コードに勝手に置き換わってしまう という現象です。現象は特定できたのですが、解決方法がまだみつかりません。

もしも、ブログのコードをコピペしておかしな動きになったときは2つ以上の連続した半角スペースを1つの半角スペースに置き換えていただくとうまくいくと思います。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る