Googleマップをショートコードで実装する

公開日：2010/12/14

更新日：2016/08/11

WordPressのテンプレートにGoogleマップをショートコードで実装する方法をご紹介します。
Googleマップは、APIがバージョン3となり、できることが増えていますが、ここではスタンダードな地図の出し方をご紹介しておきますので、必要に応じてカスタマイズしてお使いください。

ショートコードでの実装とするため、スマートフォン対応のプラグインをお使いの場合は、それぞれのテンプレートへの記述が必要となります。
まずは、どのようなショートコードで地図を表示するかを決めておきます。

ここでは、[map lat=”” text=”” target=”” width=”” height=”” class=””]
というショートコードとした場合のコードを書いていきます。
latには緯度経度をカンマ区切りで設定、textは特に指定の必要はありませんがマーカーにマウスオーバーした際のテキストを、targetは地図を1つのページで2枚以上利用する場合に他の地図と重複しないID名を設定(1ページ1枚の時は設定する必要はありません)します。
widthとheightは描写するサイズとなり、必ずpxなどの単位まで指定してください。
classは、スタイルシートなどでデザインを整える場合に利用できるclass名を設定します。

では、PC用の地図出力部分本体のコードです。
携帯表示プラグインのktai-styleではPC用のfunctions.phpを使うため、ktai-style用のコードも入っています。
携帯電話用には、javascriptではなく通常の画像が表示されるように実装します。

以下のコードを、ご使用中のテンプレートのfunctions.phpに書いてください。

function sc_gmap($atts, $content = null){

	extract(shortcode_atts(array(
		"lat" => '35.681766,139.766089',
		"text" => '',
		"target" => 'map_canvas',
		"width" => '240px',
		"height" => '180px',
		"class" => 'alignnone'
	), $atts));

	if(empty($lat) || !preg_match('/[0-9.,]+/',$lat)){ return(''); }
/* -- ktai-style用のコードここから -- */
	elseif(function_exists('is_ktai') && is_ktai()){
		$retmap  = '<img src="http://maps.google.co.jp/maps/api/staticmap?center=' . $lat . '&zoom=17&size=200x150&';
		$retmap .= 'markers=size:mid|color:red|' . $lat . '&sensor=false" alt="地図">' . "n";
		$retmap .= '<p><a href="http://maps.google.com/maps?ll=' . $lat . '&q=' . urlencode($text) . '@' . $lat . '&z=17">Googleマップで開く</a></p>' . "n";
		return($retmap);
	}
/* -- ktai-style用のコードここまで -- */
	else{
		$retmap  = '<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>' . "n";
		$retmap .= '<script type="text/javascript">' . "n";
		$retmap .= 'function initialize() {' . "n";
		$retmap .= 'var centerPos = new google.maps.LatLng(' . $lat . ');' . "n";
		$retmap .= 'var mapOptions = {' . "n";
		$retmap .= "zoom : 17,ncenter : centerPos,nmapTypeId : google.maps.MapTypeId.ROADMAP,n";
		$retmap .= "mapTypeControl : true,nscaleControl : true,nnavigationControl : truen";
		$retmap .= '};' . "n";
		$retmap .= 'var map = new google.maps.Map(document.getElementById("' . $target . '"),mapOptions);' . "n";
		$retmap .= 'var markerOptions = {' . "n";
		$retmap .= "position : centerPos,nmap : map,n";
		$retmap .= 'title : "' . $text . '"' . "n";
		$retmap .= '};' . "n";
		$retmap .= "var marker = new google.maps.Marker(markerOptions);n";
		$retmap .= '}' . "n";
		$retmap .= '</script>' . "n";
		$retmap .= '<div id="' . $target . '" class="' . $class . '" style="width: ' . $width . '; height: ' . $height . ';"></div>' . "n";
		return($retmap);
	}

}
add_shortcode("map", "sc_gmap");

つづいて、このコードがページのロード時に読み込まれるように、 bodyタグにonloadイベントを追加しinitialize()を呼び出します。
具体的にはbodyタグ部分が以下のようになります。

<body onload="initialize();">

なお、携帯電話対応の場合はjavascriptではないので、bodyタグからの呼び出しはありません。

Googleマップをショートコードで実装する

Googleマップをショートコードで実装するにコメントする コメントをキャンセル

Googleマップをショートコードで実装するにコメントするコメントをキャンセル