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

この記事は約13分で読めます。

「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のファイル一式をダウンロードして子テーマにいれます。

hpneo/gmaps
the easiest way to use Google Maps. Contribute to hpneo/gmaps development by creating an account on GitHub.

こちらのページの

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

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

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

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

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

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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ インターネット GoogleMap
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。