「GMaps.jsでGoogleMapに複数の吹き出しマーカーのある地図を作る」ではHTMLで複数マーカーのある地図を表示しました。
ここまできたらWordPressで同じような事を「簡単に」できるようにしたいなぁ、ということで子テーマに機能を追加してショートコードで複数の吹き出しマーカーのある地図を表示するカスタマイズをしてみました。
ベースとなる地図を表示するショートコードの使い方
今回のカスタマイズは、すべてショートコードで実現できるようにしました。
ベースとなる地図を表示するショートコードは以下の2行です。
[gmap_data_prepare lat=35.6529115 lng=139.772094 zoom=13] [gmap_data_show class="large"]
ショートコード名:gmap_data_prepare
機能
ベースとなる地図を準備する
引数
lat:中心地点のlat(緯度)。省略した場合は 35.6575244
lng:中心地点のlng(経度)。省略した場合は 139.3349708
zoom:Google Mapのズームレベル。省略した場合は 16
* 省略したときは コワーキングスペース8Beatを中心としたズーム値16の地図となります
ショートコード名:gmap_data_show
機能
指定された地図を描画する
引数
class:地図のDIVの大きさなどを指定するclassを指定する。省略したときは指定無し(高さ350pxとなる)。
この２つのショートコードを投稿や固定ページに書いて表示させると、
このように地図が表示されます。オプションを全部指定せずに
[gmap_data_prepare] [gmap_data_show]
表示させると、
このように8Beatを中心とした高さ350pxの地図が表示されます。
ベースとなる地図を表示するカスタマイズの方法
今回のカスタマイズは「GMaps.jsでGoogleMapに複数の吹き出しマーカーのある地図を作る」で固定的に表示した 8_overlays.html をWordPressのショートコードで地図の位置やズーム、吹き出しの追加や削除が自由に行えるようにしたものです。
それを子テーマフォルダにファイルを追加したり、functions.phpにコードを追加したりすることで実現します。
子テーマにGMaps.jsのフォルダを入れる
GMaps.jsのファイル一式を GMap.jsのダウンロードとサンプルの確認 を参照してダウンロードして、zipファイルを解凍します。
gmaps-master というフォルダ名で解凍されるので、フォルダ名を gmaps に変更します。
使いたい子テーマにこのgmapsを移動します。今回は例として twentysixteen-child という子テーマにカスタマイズをします。
子テーマの中身はこんな感じになりました。
子テーマのstyle.cssにGMaps.jsで使用するcssを追加する
子テーマのstyle.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;
}
を追加します。今回のカスタマイズは前回で行った吹き出しの種類と地図の大きさを実現できるようにしているのでそのときに使ったcssを追加しました。種類や地図の大きさなどを追加したい場合はこのstyle.cssに追加してください。
地図を表示するコードを追加する
子テーマのfunctions.phpにショートコード2つを使って地図を表示することを実現するコードを追加します。
// 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', 'http://maps.google.com/maps/api/js?sensor=true', 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);
}
を追加します。gmap_data_prepare、gmap_data_showの２つのショートコードを追加して、ショートコードで実行する機能をfunctionに記述してあります。
この記述をするために
「Qiita PHPからJavaScriptに変数を渡すまとめ」
を参考にさせていただきました！ありがとうございますm(_ _)m。外部のjsに値を渡す方法は幾つかあったのですが、この方法でようやくうまく動きました。
地図を指定する部分をgmaps_data.jsというjsファイルにして、子テーマに保存します。内容は
var map;
jQuery(document).ready(function(){
var $gmaps_data = jQuery('#gmaps_data');
var latx = JSON.parse($gmaps_data.attr('latx'));
var lngx = JSON.parse($gmaps_data.attr('lngx'));
var zoomx = parseInt(JSON.parse($gmaps_data.attr('zoomx')));
map = new GMaps({
el: '#gmaps_map',
zoom: zoomx,
lat: latx,
lng: lngx
});
});
このようになっています。functions.phpのgmap_data_prepareで受け取ったショートコードの引数を元に、ベースの地図を設定しています。
これで、
2行のショートコードからこの地図が表示されるようになります。
地図に複数の吹き出しを表示するショートコードの使い方
「GMaps.jsでGoogleMapに複数の吹き出しマーカーのある地図を作る」で作った 8_overlays.html と同じ地図をショートコードで実現させてみました。
使い方は、
[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行ずつ指定しています。
ショートコード名:gmap_data_set
機能
地図上に吹き出しを表示する
引数
id:1から順番に指定する
name:吹き出しに表示する名前。省略した場合は 8Beat。
lat:吹き出しのlat(緯度)。省略した場合は 35.6575244
lng:吹き出しのlng(経度)。省略した場合は 139.3349708
class:吹き出しの種類(class)。省略した場合は overlay
吹き出しが必要な数分のショートコード gmap_data_setを追加します。
表示させるとこのように、複数の吹き出しが表示されました(^^)/。ショートコードにしたので追加や削除などが簡単にできると思います♪
地図に複数の吹き出しを表示するカスタマイズ方法
吹き出しを実現する部分のコードについて書きます。
子テーマのfunctions.phpに
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 );
}
を追加します。これができるまでちょっと苦労したんですが(^_^;、複数の吹き出し情報を保存してあとで識別できるように
script id="gmaps_data_point<?php echo $id; ?>"
としたことでようやく、複数の吹き出しを表示することができました。
吹き出しを表示する部分のjsファイルを gmaps_data_point.js という名前で作ります。中身は
var map;
jQuery(document).ready(function(){
var step;
var max;
max = indexx + 1;
for (step = 1; step <= indexx; step++) {
var $gmaps_data_point = jQuery('#gmaps_data_point' + step);
var latx = JSON.parse($gmaps_data_point.attr('latx'));
var lngx = JSON.parse($gmaps_data_point.attr('lngx'));
var namex = JSON.parse($gmaps_data_point.attr('namex'));
var classx = JSON.parse($gmaps_data_point.attr('classx'));
console.log('gmaps_data_point ' + $gmaps_data_point);
// ポイントを表示
map.drawOverlay({
lat: latx,
lng: lngx,
layer: 'overlayLayer',
content: '<div class="' + classx + '">' + namex + '<div class="' + classx + '_arrow above"></div></div>',
verticalAlign: 'top',
horizontalAlign: 'center'
});
}
});
このようになっています。1から一番最後のIDの数字までをループしてすべての吹き出しを表示します。
このような構造になっているのでショートコードに指定するIDは1から順に1つずつ大きくしていかないとうまく表示できません(^_^;。
使い方の例
東京湾付近の駅を吹き出しにした表示です。
[gmap_data_prepare lat=35.6529115 lng=139.772094 zoom=13] [gmap_data_set id=1 name='東京駅' lat=35.681382 lng=139.76389] [gmap_data_set id=2 name='豊洲駅' lat=35.6537904 lng=139.7930883] [gmap_data_set id=3 name='新橋駅' lat=35.6655125 lng=139.7572929] [gmap_data_set id=4 name='品川駅' lat=35.628856 lng=139.73666] [gmap_data_show class="large"]
このような記述で、
こういう地図ができます。
子テーマに追加するファイルなどのまとめ。作ったファイルを置いておきます
この機能が使えるようになった子テーマの中身は、
このような構成になっています。
それぞれ、子テーマに追加や修正をする方法は以下の通りです。
style.css 地図表示に必要なcssを追加した
それぞれの子テーマによって頭の部分が違うので追加する部分のコードをコピペしてください。
gmaps_data_point.js 吹き出しを表示するjs
gmaps_data.js 地図を表示するjs
追加した２つのファイルはgmaps_ryus.zipこれをダウンロードして解凍してください。
functions.php 地図表示に必要なコードを追加した
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', 'http://maps.google.com/maps/api/js?sensor=true', 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 );
}
gmapsフォルダ GMap.jsのライブラリ
GMap.jsについてはこの手順で子テーマに入れてください
まとめ:簡単に追加できるようにするのは大変でした(^_^;
このカスタマイズはいろいろな紆余曲折があり、思ったよりずいぶん時間(2時間ぐらいでできると思いましたが5時間ぐらいかかった…)がかかってしまいました。
しかし、参考になるサイトなどの情報からようやく作ることができました。
欲を言えばもっともっと便利に使いやすくしたりしたいですが、まぁキリが無いのでこのぐらいにしておきます。また良いカスタマイズができたらblogに書きます(^^)/
[amazon_searchlink search=”jquery”]
コメント
コメント一覧 （2件）
初めまして。
参考にさせて頂いておりますが「地図を表示するコードを追加する」に記載があるコードを子テーマのfunctions.phpに追記しましたが、構文エラーとなってしまいます。考えられる原因を教えて頂けないでしょうか。
よろしくお願いいたします。
phpさん、おはようございます。参考にしていただきありがとうございます。
＞functions.phpに追記しましたが、構文エラーとなってしまいます
構文エラーということですが、具体的にエラーになったときの状況をもう少しお聞かせいただけないとなんとも分かりません。
いくつか原因を考えますと以下のようなものがあります。
以前からblogのコードをコピーすると半角スペースの文字コードが化けてしまうという問題が発生しています。特に行の頭の半角スペースが異なる文字コードになってしまい、それが原因でエラーになる場合が多いです。念のためにコピーしてペーストしたコードの冒頭の半角スペースを自分で打ち直して保存、をしてみていただけますでしょうか。