【マップ】Googleマップのマイマップでルート表示する際の縮尺指定

Googleマップのマイマップでルートを表示します。マイマップで地図埋め込み用のiframeタグのソースには縮尺の指定がありません。マップのURLにパラメータを追加することで縮尺が指定できます。

ページ表示時非表示・縮尺指定あり
ページ表示時非表示・縮尺指定なし
ページ表示時表示・縮尺指定なし

htmlのコードです。外側のクラス名map_wrapのdivタブはレスポンシブ用です。ポイントはiframeタグのsrc属性の最後に追加した「&z=15」の部分です。これが縮尺指定のパラメータです。zには0から23までの整数を指定して、地図の拡大率を設定できます。マイマップで地図埋め込み用のiframeタグのソースにはデフォルトで縮尺の指定がありませんので、縮尺を指定したい場合はこのようにパラメータを追加する必要があります。なおiframeタグはデフォルトでborderが付くため、style=”border:0;を指定してborderを消しています。

<p class="map_open">マップを表示</p>
<div class="map_wrap">
<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1_Vg1kym9h0C3knn-9A22RUOgYI70VZz5&z=15" width="100%" height="auto" style="border:0;"></iframe>
</div>

続いてCSSのコードです。iframeタグを囲うクラス名map_wrapのdivタグにdisplay: none;を指定して非表示にします。

.map_open {
	color: #1967d2;
	text-decoration: underline;
	cursor: pointer;
}
.map_wrap {
	display: none;
	position: relative;
	padding-top: 56.25%;
}
.map_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

最後にjQueryのコードです。「マップを表示」のpタグをクリックでGoogleマップを表示します。ページ表示時にiframeタグが非表示になっている場合、iframeタグのsrc属性に縮尺のパラメータが追加されていれば縮尺の表示に問題はありません。ですが、縮尺の指定がない場合は地図が広域で表示されてしまいます。ページ表示時にiframeタグも表示になっていれば、縮尺のパラメータが指定されていなくても縮尺の表示に問題はありません。

$(function() {
	$('.map_open').on('click', function() {
		$(this).next().slideToggle();
	});
});