WordPressにGoogleマップをプラグインなしで表示させる。スマートフォン対応

WordPressにGoogleマップをプラグインなしでスマートフォン対応にさせる方法

GoogleマップをWordPressの記事や固定ページに表示させるためには、コードを取得してきて直接記述するか、『MapPress Easy Google Maps』といったプラグインを利用するかと思います。

参考:googleマップを簡単に設置できるプラグイン / MapPress Easy Google Maps

プラグインを利用すれば細かい設定やスマートフォンに対応させることができますので、それなりに使い勝手がいいかもしれません。しかし、デフォルトの表示で問題ない場合には、直接記述する方法が簡単なのです。

ただ、コードを直接記述すると、スマートフォンなどでの閲覧の際に画面からはみ出してしまい、うまく表示させることができません。

そこで、Googleマップをプラグインなしでスマートフォンに対応させるために、ショートコードとCSSの追加で簡単に実装できる方法をご紹介します。

サンプル

サンプルとして、東京スカイツリーの地図を今回ご紹介する方法で表示させてみました。

投稿の際は、たった一行記述するだけなので簡単です。

Googleマップをスマートフォンに対応させるためのコード

以下のコードをfunctions.phpに追加してください。これは、ショートコードで表示させるためのコードです。

function fc_googleMaps( $atts, $content = null ) {
	extract( shortcode_atts( array(
		"width" => '630',
		"height" => '354',
		"src" => ''
		), $atts ) );
		return '<div class="post_iframe"><iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'&amp;output=embed"></iframe></div>';
}
add_shortcode( "googlemap", "fc_googleMaps" );

3行目と4行目の“width” => ‘630’“height” => ‘354’は、表示されるマップの横と縦のサイズを指定しております。

以下のコードをstyle.cssなど、利用しているCSSファイルに追加してください。

.post_iframe{
	position: relative;
	margin: 2.5em 0;
	padding: 79px 0 50%;
	overflow: hidden;
}

.post_iframe iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これで準備は完了です。

WordPressにGoogleマップを表示させる

記事や固定ページに貼り付ける際には、紹介したい場所を表示させた状態のURLを取得してきます。

まず、Googleマップから、地図にしたい場所の住所や建物名を入力し、表示させる。

左サイドバーにある【 リンク 】のボタンをクリックすると、【 メールやチャット用リンク 】が表示されるので、URLをコピーしてくる。

注意:短縮URLでは表示させることができませんので、気をつけてください。

あとは、表示させたい箇所に以下のショートコードを入力し、URLを貼り付ければ完了です。


簡単なショートコードで表示できますので、ぜひ試してみてください。

WordPressプラグインの【AddQuicktag】などに登録しておくと、ボタン一発でショートコードを表示させることができ、更新がさらにラクになります。プラグインなしで、という記事なのですがね…。

ちなみに、WordPressで投稿する際に【 プレビュー 】しても地図は表示されません。【 公開 】すれば表示されます。初めは知らなかったので、公開する前に悪戦苦闘してました…。初めての方のためにお知らせしておきます。

photo credit: masakiishitani via photopin cc

WordPressにGoogleマップをプラグインなしで表示させる。スマートフォン対応 by

コメントを残す