PC、スマホで表示を分けるブログ(ホームページ)を作っている時に悩みの種になるのがGoogle Mapsの埋め込み地図。スマホで大きく表示させるとスクロールしにくくなるし、小さく表示させると地図が見えにくくなる…。けっこう厄介なんですよね。

「結局、直接Google Maps見た方が早いや」というように、何かと形骸化しがちなページ内の埋め込み地図。少しでも実用的になったらなーと思い、ニョローッと表示範囲を広げることができるボタンを追加してみたので紹介します。

1ボタンをクリック(タッチ)すると地図が広がります

ということで、サンプルはこんな感じです。地図の下にあるボタンをクリック(タッチ)すると、埋め込み地図が下にニョローっと広がります。よかったら試してみて下さいね！

2縮めると画像状態で、広げると動かせる！

この地図、スマホビューで効果を発揮します。スマホビュー時、Google Mapsの埋め込み地図は高さが一定以下の場合、枠内を動かすことができません(iPhone5で動作確認)。その性質を利用して、「縮めている時は実質画像状態、広げている時は操作可能」という切り替えを実現しています。

画面をスクロールしようとして間違って埋め込み地図の中を動かしてしまう、上記サンプルのようなイライラがなくなりますよね。

上記はスマホで使ったイメージです。縮めている時は枠内が動かず、広げている時は枠内を動かせているのが分かると思います。地図に用がない時は全く邪魔をしない空気のような存在で、用がある時は存分に活躍してくれる。Google Mapsの埋め込み地図が今までよりもグーンと実用的になると思いませんか？

3Javascriptを配布

もし、この地図を見て「いいなー」と思った人は、ぜひ試してみて下さいね。Javascriptを配布します。実装方法は驚くほどに簡単です。実装する時も、取り外す時も、それまでの記事(ページ)に全く影響を与えることはありません。

デモを見る

3-1Javascript

下記がJavascriptの部分です。〜.jsという名前を付けて保存し、サーバーにアップロードして読み込んで下さい。ちなみに、jQueryを利用しているので、別途読み込んでおいて下さい。

$(function(){
	//iframeタグを囲んでいるDIVのclass名
	var googlemaps_class = 'googlemap';

	//地図を広げた時の高さ(横幅に対するパーセンテージ)
	var open_google_maps_height = '125';

	//地図を縮めた時の高さ(横幅に対するパーセンテージ)
	var close_google_maps_height = '56.25';

	$('.'+googlemaps_class).each(function(){
		$(this).after('<button class="googlemaps-size-changer-syncer" style="">▼地図を広げる (画面はそのまま)</button>');
		$('.googlemaps-size-changer-syncer').toggle(
			function(){
				$('.'+googlemaps_class).eq($('.googlemaps-size').index(this)).css({'padding-bottom':open_google_maps_height+'%'});
				$(this).html('▲地図を縮める');
			},
			function(){
				$('.'+googlemaps_class).eq($('.googlemaps-size').index(this)).css({'padding-bottom':close_google_maps_height+'%'});
				$(this).html('▼地図を広げる');
			}
		);
	});
});

3-2スタイルシート

次のコードを、既存のスタイルシートに加えて下さい。

.googlemap{
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
	max-width:100%;
	height:auto;
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}
.googlemap iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.googlemaps-size-changer-syncer{
	font-size:13px;
	font-weight:bold;
	margin:0;
	width:100%;
	padding:8px 0;
	background:#55acee;
	text-align:center;
	color:#fff;
	border:none;
	font-weight:700;
	outline:none;
	cursor:pointer;
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	transition:all 0.4s;
}

3-3HTML

この機能を実装するには、Google Mapsの埋め込み地図のコード(iframeタグ)を、次のようにgooglemapというクラス名(Javascriptの設定で変更可)が入ったdivタグで囲んで下さい。1ページに何個あっても大丈夫です。

<div class="googlemap">
	<iframe src="〜"></iframe>
</div>

3-4外したい時はどうすればいいの？

使うのを止める時は、そのままスタイルシートとJavascriptを削除してしまえば大丈夫です。HTMLにgooglemapというクラス名の付いたdivタグは残りますが、デザインに何も影響を与えることがないはずです。

4埋め込み地図を実用的にしよう！

いかがでしたか？最近、このブログでは「記事内の埋め込み地図を如何に実用的にできるか？」を考えて、試行錯誤しています。やりすぎて逆に使いづらくなってしまうこともしばしばだったんですが、今回の縮めたり広げたりするアイデアは、我ながら良いんじゃないかなーと思ってシェアしてみました。よろしければ、使ってみて下さい！設置に関して分からないことがあれば、コメント欄で気軽に疑問点を教えて下さいね。