「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にコードを追加します。
// gmap.js
add_shortcode( 'gmap_data_prepare', 'gmap_data_prepare' );
function gmap_data_prepare($atts) {
/* 引数を展開する */
extract(
shortcode_atts(
array(
'lat' => '35.6575244',
'lng' => '139.3349708',
'zoom' => 16,
),
$atts
)
);
wp_enqueue_script( 'googlemapapi', 'https://maps.googleapis.com/maps/api/js?key=取得したgooglemapのAPIキー', array(), false, true );
wp_enqueue_script( 'gmaps', get_bloginfo( 'stylesheet_directory') . '/gmaps/gmaps.js', array(), false, true );
// 地図を記述
wp_enqueue_script( 'gmaps_data', get_bloginfo( 'stylesheet_directory') . '/gmaps_data.js', array(), false, false );
?>
<script id="gmaps_data" src="<?php echo get_bloginfo( 'stylesheet_directory'); ?>/gmaps_data.js"
latx ='<?php echo json_safe_encode($lat); ?>'
lngx ='<?php echo json_safe_encode($lng); ?>'
zoomx ='<?php echo json_safe_encode($zoom); ?>'
></script>
<?php
}
function gmap_data_show($atts) {
/* 引数を展開する */
extract(
shortcode_atts(
array(
'class' => '',
),
$atts
)
);
return '
<div class="row">
<div>
<div id="gmaps_map" class="'.$class.'"></div>
</div>
</div>
';
}
add_shortcode( 'gmap_data_show', 'gmap_data_show' );
function json_safe_encode($data){
return json_encode($data, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
}
add_shortcode( 'gmap_data_set', 'gmap_data_set' );
function gmap_data_set($atts) {
/* 引数を展開する */
extract(
shortcode_atts(
array(
'id' => '1',
'name' => '8Beat',
'lat' => '35.6575244',
'lng' => '139.3349708',
'class' => 'overlay',
),
$atts
)
);
?>
<script id="gmaps_data_point<?php echo $id; ?>" src="<?php echo get_bloginfo( 'stylesheet_directory'); ?>/gmaps_data_point.js"
latx ='<?php echo json_safe_encode($lat); ?>'
lngx ='<?php echo json_safe_encode($lng); ?>'
namex ='<?php echo json_safe_encode($name); ?>'
classx ='<?php echo json_safe_encode($class); ?>'
></script>
<script type="text/javascript">
var indexx = <?php echo json_safe_encode($id); ?>;
</script>
<?php
// 地図にポイントを記述
wp_enqueue_script( 'gmaps_data_point', get_bloginfo( 'stylesheet_directory') . '/gmaps_data_point.js', array(), false, true );
}
取得したgooglemapのAPIキー というところには、実際に取得したAPIキーで置き換えます。
style.cssに追加する
子テーマのstyle.cssにmap表示に必要なCSSを追加します。
/* gmaps */
#gmaps_map{
display: block;
width: 95%;
height: 350px;
margin: 0 auto;
-moz-box-shadow: 0px 5px 20px #ccc;
-webkit-box-shadow: 0px 5px 20px #ccc;
box-shadow: 0px 5px 20px #ccc;
}
#gmaps_map.large{
height:500px;
}
.overlay{
display:block;
text-align:center;
color:#fff;
font-size:16px;
line-height:20px;
opacity:0.8;
background:#4477aa;
border:solid 3px #336699;
border-radius:4px;
box-shadow:2px 2px 10px #333;
text-shadow:1px 1px 1px #666;
padding:0 4px;
}
.overlay_arrow{
left:50%;
margin-left:-16px;
width:0;
height:0;
position:absolute;
}
.overlay_arrow.above{
bottom:-15px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-top:16px solid #336699;
}
.overlay_arrow.below{
top:-15px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-bottom:16px solid #336699;
}
/* overlay_cafe add */
.overlay_cafe{
display:block;
text-align:center;
color:#fff;
font-size:16px;
line-height:20px;
opacity:1;
background:#44aa77;
border:solid 3px #339966;
border-radius:4px;
box-shadow:2px 2px 10px #333;
text-shadow:1px 1px 1px #666;
padding:0 4px;
}
.overlay_cafe_arrow{
left:50%;
margin-left:-16px;
width:0;
height:0;
position:absolute;
}
.overlay_cafe_arrow.above{
bottom:-15px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-top:16px solid #339966;
}
.overlay_cafe_arrow.below{
top:-15px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-bottom:16px solid #339966;
}
Gmapを表示するために必要なjsを追加します
Gmapを表示するために必要なjsを追加します。
gmaps_data_point.js 吹き出しを表示するjs
gmaps_data.js 地図を表示するjs
追加した２つのファイルはgmaps_ryus.zipこれをダウンロードして解凍してください。
解凍してできたgmaps_data_point.jsとgmaps_data.jsを子テーマの直下に置きます。
マップや地点をショートコードで表示する
これで準備ができたのでマップや地点をショートコードで表示します。
地図だけを表示する
地図だけを表示してみます。
[gmap_data_prepare lat=35.6529115 lng=139.772094 zoom=13] [gmap_data_show class="large"]
このように緯度経度とzoomを数値として指定したショートコードで投稿コンテンツを作成すると、
このような地図が表示されます。
複数の吹き出しを表示する
複数の吹き出しを表示するショートコードはこんな感じです。
[gmap_data_prepare lat=35.6575244 lng=139.3349708 zoom=14] [gmap_data_set id=1 name='ハニカムステージ' lat=35.6578954 lng=139.3386372] [gmap_data_set id=2 name='8Beat' lat=35.6575244 lng=139.3349708] [gmap_data_set id=3 name='Wark' lat=35.6578086 lng=139.3131089] [gmap_data_set id=4 name='Cafe de la poste' lat=35.6614742 lng=139.3306111 class="overlay_cafe"] [gmap_data_set id=5 name='バーゼル富士森公園店' lat=35.653637 lng=139.3202639 class="overlay_cafe"] [gmap_data_show class="large"]
- ご注意：上記はわかりやすく1行ずつ改行して書いてありますが、実際にこの形で書くと <br> が1行ずつ入ってしまうため地図の上部に書いた行数分の <br> が入ります。入らないようにするには改行せずにショートコードを続けて書くようにしてください
投稿などでこのようにショートコードを指定します。各吹き出しはgmap_data_setで指定します。idは1から順に指定します。名前、緯度経度を指定して、バルーンの背景色を青ではなく緑にしたい場合はclass=”overlay_cafe” と付け加えておきます。これを表示すると、
こんな感じに複数の地点を表示する地図が表示ができました(^^)/
まとめ：技術は日進月歩。最新の状態でできるかどうかはとても大変
以前の記事を書いてからたった4ヶ月で、使えなくなっていたようです(>_<)。いつもいつも技術は日進月歩なので気がついてかつ時間があってかつ可能であれば今回のように最新の記事を書くことができますが、全部の記事を検証するのは無理なので古い記事は参考程度としていただくと助かります。
また、最近頻発している状況があるのですがブログにあるコードをコピーして動かしたときにエラーになってしまうということがあります。
原因は ２つ以上の半角スペースが全角スペースなどの文字コードに勝手に置き換わってしまう という現象です。現象は特定できたのですが、解決方法がまだみつかりません。
もしも、ブログのコードをコピペしておかしな動きになったときは２つ以上の連続した半角スペースを１つの半角スペースに置き換えていただくとうまくいくと思います。
コメント