[WordPress]ワードプレスでグーグルマップを任意の箇所に表示する方法

ワードプレスプラグイン「Google Maps Anywhere」と「Custom Field GUI Utility」を使用してグーグルマップを任意の箇所に表示するときの注意書き

ワードプレスでグーグルマップを表示する際、投稿欄ではなく任意の箇所に表示する際の注意点と、任意の箇所にストリートビューを表示するコードも書いておきます。

はじめに今回使用する2つのプラグインを簡単に紹介。

WordPress のカスタムフィールドを使いやすくするプラグイン「Custom Field GUI Utility」

「Custom Field GUI Utility」は同じようなコンテンツを新規追加・更新する際には必須と言ってよいプラグインです。
ワードプレスにデフォルトでついている機能、カスタムフィールドを使用してもよいのですが、誰でも簡単に理解できるUI（ユーザーインターフェイス）が魅力です。
ワードプレスをCMS化(サイト更新が手軽になる)するときに必須と言っていいプラグインです
作成者は日本の方なので使いやすいですよ。

ダウンロード先: Custom Field GUI Utility 3 – かたつむりくんのWWW

Google Maps Anywhere (地図表示)プラグイン「Google Maps Anywhere」

「Google Maps Anywhere」はグーグルマップを簡単にサイト内に挿入できるプラグインで非常に便利です。こちらもわかりやすいUIが魅力です。
こちらも作成者は日本の方で日本産です。

ダウンロード先: Google Maps Anywhere (地図表示)

「Google Maps Anywhere」を投稿箇所（記事のコンテンツ箇所）に表示させないようにする

「Google Maps Anywhere」を使用すると、カスタムフィールドに緯度・経度を自動入力してくれとても便利です。
しかし、投稿箇所（記事のコンテンツ箇所）にも自動的に地図が表示されてしまいます。
つまり任意の表示したい箇所に投稿欄の2箇所に地図が表示されてしまうということです。
これではこちらの表示したい箇所のみに地図の挿入ができません。
これを防いで、表示箇所を「Custom Field GUI Utility」を使って任意の箇所のみにしたいと思います。

修正、変更していきます。
まず「Google Maps Anywhere」プラグイン内
googlemaps-anywhere.php の1502行目のpタグ内を変更します。

	function addGoogleMap($content) {
		if ( is_single() && !class_exists('Lightweight_Google_Maps') ) {
			global $post;
			$latlng = get_post_meta($post->ID, 'Lat_Long', true);
			if ( !empty($latlng) ) {
				list($lat,$long) = split(',', $latlng);
				$content .= '<p>'
					. "[googlemap lat=\"{$lat}\" lng=\"{$long}\" zoom=\"13\" type=\"G_NORMAL_MAP\"]{$lat},{$long}[/googlemap]"
					. '</p>';
			}
		}
		return $content;
	}

を以下のように空白に変更します。

	function addGoogleMap($content) {
		if ( is_single() && !class_exists('Lightweight_Google_Maps') ) {
			global $post;
			$latlng = get_post_meta($post->ID, 'Lat_Long', true);
			if ( !empty($latlng) ) {
				list($lat,$long) = split(',', $latlng);
				$content .= '<p>'
					. ""
					. '</p>';
			}
		}
		return $content;
	}

上記のようにpタグ内を空白にすることで自動挿入が無効になりました。

空白にすると、「Google Maps Anywhere」が自動的に追加するフッターの外部JavaScriptリンクが消えてしまいます。
これを「Custom Field GUI Utiliy」の機能を利用して、「Google Maps Anywhere」を使用した際のみに挿入するようにします。
以下のように、特定の条件で外部JavaScriptリンクを挿入するように設定。
※どこでもいいのですが、footer.php内に記述してください。

<?php if(post_custom('Lat_Long')): // Lat_Longのキーがある時に下記のスクリプトを挿入?>
<script type="text/javascript" src="http://example.jp/wp-content/plugins/google-maps-anywhere/js/google-maps-anywhere.min.js"></script>
<?php endif; ?>

これでフッターの外部JavaScriptリンクを読み込むようになりました。
「Google Maps Anywhere」に関する設定はこれで完了です。

任意の箇所にグーグルマップを表示させる

最後に、以下のようにコードを記述すると、任意の箇所にグーグルマップが表示されます。

<?php if(post_custom('Lat_Long')):?>
<div class="googlemaps">
<a href="http://maps.google.com/maps?f=q&amp;hl=ja&amp;geocode=&amp;q=<?php echo post_custom('Lat_Long')?>
&amp;ie=UTF8&amp;ll=<?php echo post_custom('Lat_Long')?>&amp;t=h&amp;z=17&amp;maptype=G_NORMAL_MAP" title="<?php the_title(); ?>"><img src="http://maps.google.com/staticmap?markers=<?php echo post_custom('Lat_Long')?>
,red&amp;zoom=17;key=（Google Maps API Key）&amp;hl=ja" alt="<?php the_title(); ?>の周辺マップ" title="<?php the_title(); ?>の周辺マップ" /></a>
</div>
<?php endif;?>

17という数字はグーグルマップのズーム度になります。好きな大きさに変更してください。

これで、カスタムフィールドと「Google Maps Anywhere」を使用して、
グーグルマップを投稿欄に表示させずに、任意の表示したい箇所のみに表示することができます。

おまけ。任意の箇所にストリートビューを表示させる

以下のように記述した後、通常通り「Google Maps Anywhere」を使用して更新すると、任意の箇所にストリートビューが表示されます。

<?php if(post_custom('Lat_Long')):?>
<div class="googlemaps"><a href="http://maps.google.com/maps?f=q&amp;hl=ja&amp;geocode=&amp;q=<?php echo post_custom('Lat_Long')?>&amp;ie=UTF8&amp;ll=<?php echo post_custom('Lat_Long')?>&amp;t=h&amp;z=15&amp;layer=c&amp;cbll=<?php echo post_custom('Lat_Long')?>&amp;cbp=1,0,,0,0&amp;maptype=STREETVIEW" title="<?php echo post_custom('Lat_Long')?>"></a></div>
<?php endif;?>

※プラグイン「Google Maps Anywhere」をアップグレードすると、通常通り投稿欄に地図が表示されますので、気をつけてください。
アップグレードした際には、今回のように googlemaps-anywhere.php 内を書き直すことを忘れずに。