WordPressにてGoogle maps APIで地図表示

旅行やご当地ネタが多い拙ブログですので、地図を有効活用して情報発信をしていきたいと常々思っていました。色々苦戦はしたものの、アイディアからプログラムへの落とし込みが一段落したので、その軌跡を残そうと思います。無理矢理Wordpressに貼り付けようと思ったのがそもそもの間違いだったのかもしれませんが・・・。

地図を活用するにあたって使用したのが、Google Maps APIです。その名の通りGoogle Mapsを外部から操作できるAPIになります。

今回の目標はGoogle Mapsにマーカーを表示し、これをクリックすると関連するページへのリンクが表示されるようにすることです。

これを導入するためには、Googleが公開しているJSファイルへリンクを張る必要があります。しかしWordpressでは様々なJSファイルにリンクが張られているため、お互いに干渉する可能性があります。そこで、function.php内でwp_enqueue_script関数によってロードすることにします。

function article_map() {
	wp_enqueue_script("maps-api-script", "http://maps.googleapis.com/maps/api/js?sensor=false", array(), NULL);
	wp_enqueue_script("my_script", "/map.js");
	wp_enqueue_style("my_css", "/map.css");
}
if($_SERVER['REQUEST_URI'] == "/landscape-list")
{
	add_action('wp_enqueue_scripts', 'article_map');
}

landscape-listのページのみで表示したいので、その条件分岐が6行目です。

add_action関数で間接的に呼び出していますが、皆さんおまじない的に使用されていたので、見よう見まねで使うことにしましたwあとは各記事内でJavaScriptやCSSを入力するとバグの元なので、自前のJSファイルやCSSファイルもロードするようにしました。

2行目のwp_enqueue_script関数第3引数でNULLを指定すると、通常ファイル名の後ろにWordpressのバージョンが自動付与される設定が解除されるようになります。

‹div id="map-canvas" style="width: 100%; height: 500px"></div>
function initialize() {
  var myLatlng = new google.maps.LatLng(34.68504, 135.19904);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var contentString = 'デザインクリエイティブセンター神戸:KIITO';
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: contentString
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

Googleが公開しているサンプルのコピペです。ID:map-canvasの要素にGoogle Mapsを流し込み、さらにKIITOにマーカーを配置、クリックすると情報ウィンドウが表示されるだけのプログラムです。

Google Maps API

ここで更に問題になったのが、ズームコントローラーが表示されない事態です。散々調べたんですが、次のコードをCSSに追加すると表示されるようになりました。

#map-canvas label { width: auto; display: inline; }
#map-canvas img { max-width: none; max-height: none; }
Google Maps API

アスペクト比が異なるのは撮影時間が異なるためですw

あとはHTML上に一覧として表示している場所リストをjQueryでマーカーに流し込んだのが、今回の成果品になります。このjQueryもWordpressで使用するには一苦労で、次のコードをjQueryを使用する前後に挟み込む必要があります。また上述のGoogle Mapsを初期化するinitialize関数が呼び出されるタイミングとDOMの読み込みが完了するタイミングの差にも注意がいります。

(function($){
  // jQuery含むコード云々
})(jQuery);
まだまだスポットが少ないので、追々追加していきます。

実のところプログラムはあんまり好きじゃないけど、そこにアイディアをどう落とし込むかをうんうん唸って考えるのは嫌いじゃないです。まちづくりでICTどう活用するかを夢見て、研究室を選び、就職したかったはずなんだけどなぁ・・・。結局のところ大学の先生に諭された「まちづくりじゃお金にならない」っていう結論に収束するんだけど。

Code Samples – Google Maps JavaScript API v3

https://developers.google.com/maps/documentation/javascript/examples/?hl=ja

Google Maps使い方

http://waox.main.jp/news/?page_id=1013
投稿日:
カテゴリー: ICT タグ:

作成者: きたけん

神戸出身&在住。大学では環境を学び、今はまちづくりに携わる。思い立ったらすぐに飛び出してしまう。

2件のコメント

  1. はじめまして。
    現在、東京の東地区情報サイトを製作しているのsoichiといいます。
    wordpressを使ってブログを製作中なのですが、
    googlemap apiが使い方がよくわかりません。
    そもそもプログラミングがわかっていません。
    おそらく、
    地図はgoogleを引用し、
    詳細は自分のデータベースを自分で作る
    みたいな感じなのでしょうがよくわかっていなく、
    つまずいてしまって困っています。
    こちらのページの地図のように作りたいのですが
    イロハを教えていただけないでしょうか。
    シェアハウスを運営しているので東京へお越しの際は
    宿代をサービスさせていただきます。

    そもそもからお願いします。

  2. はじめまして。
    このページで掲載している情報はWordpress上でGoogle maps apiを導入する注意点です。
    ですので、まずはHTMLにべた打ちで、「https://developers.google.com/maps/documentation/javascript/examples/marker-simple?hl=ja」にあるソースコードを実行してみてはいかがでしょう。ただマーカーを表示するだけのプログラムです。
    その上で、本記事の方法をWordpressの固定ページに試してみてください。
    あとは複数のマーカーを設置する段階では、何かしらデータベースがあったほうがいいでしょうから、別途データベースの勉強が必要かもしれないです。自分は簡易にJavascriptで外部XMLを流し込んでいるだけですので、大規模になるとSQLとかが必要でしょうか(SQLは全く詳しくないので、お役に立てそうにないです。)。
    最後にGoogle Mapをフリーでの商用利用はおそらくNGだと思いますので、よくよくライセンスを確認しましょう。
    頑張ってください!

コメントは受け付けていません。