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関数で間接的に呼び出していますが、皆さんおまじない的に使用されていたので、見よう見まねで使うことにしましたｗあとは各記事内で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にマーカーを配置、クリックすると情報ウィンドウが表示されるだけのプログラムです。

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

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

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

あとは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