Secura Vita

GoogleMapの埋め込みをグレースケールに

まずはGoogleMapの埋め込みをグレースケールにします。

<div class="map">
	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13317.14899430723!2d135.77275200504937!3d33.4418220455696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6006253f66f02415%3A0x37cedd04b66199ec!2z5pys5bee5pyA5Y2X56uv44Gu56KR!5e0!3m2!1sja!2sjp!4v1743567224516!5m2!1sja!2sjp" width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

次にCSSで大きさを指定します。

iframeにサイズ指定してもいいんですが、可変対応させることが多いかと思うのでiframeの上のdivでサイズを指定し、iframeは幅高さとも100%で設定してます。

.map {
	width: 600px;
	height: 400px;
}
iframe {
	width: 100%;
	height: 100%;
	filter: grayscale(100%);
}

カードやズームのボタンを隠す

特になにもなければ上記のままでいいんですが、埋め込みすると場所のカードやズームのボタンなどが表示されてしまい、これを見せたくないという要望もあるかと。

API使うなら設定でできるんですが、埋め込みだと無理やり隠すしか方法はありません。

高さをカードやボタン分増やしてその分ずらして隠してしまうというやり方です。

.map {
	width: 600px;
	height: 400px;
	overflow: hidden;
}
iframe {
	width: 100%;
	height: calc( 100% + 400px );
	margin-top: -200px;
	filter: grayscale(100%);
}

iframeの高さを+400pxして上に200pxずらすことによって枠の中央に持って行きます。

.mapにoverflow:hiddenを書くことではみ出した部分を非表示に。

これでカードやボタン類が隠れてスッキリします。

埋め込みのサイズを変えると地図の縮尺も変わってしまうようなのでちょっと調整しました。

埋め込みの縮尺は4f13.1の13.1の数字を変えればできます。

今回は20にすると大体おんなじになりました。

	<div class="map">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13317.14899430723!2d135.77275200504937!3d33.4418220455696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f20!3m3!1m2!1s0x6006253f66f02415%3A0x37cedd04b66199ec!2z5pys5bee5pyA5Y2X56uv44Gu56KR!5e0!3m2!1sja!2sjp!4v1743567224516!5m2!1sja!2sjp" width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
	</div>

この状態での不具合

上記でパッと見問題なさそうに見えますが、変な動作が起こってます。

それはoverflow:hiddenで隠れた箇所でもmapの操作ができてしまうというものです。

よく見ると枠外のマウスポインタが変わってますよね。

ここをぐりぐり動かすとマップも動きます。

どうやらoverflow:hiddenで隠れた箇所もmapとして機能しちゃってる見たいです。

これを解決するには

overflowとfilterは同じ要素に記述する

ということでした。

.map {
	width: 600px;
	height: 400px;
	overflow: hidden;
	filter: grayscale(100%);
}
iframe {
	width: 100%;
	height: calc( 100% + 400px );
	margin-top: -200px;
}

これで枠外は普通のマウスポインタになりました。

検証したんですが、これは親子は関係なくoverflowとfilterは同じところに設定しないとだめでした。

例えば下記のようなhtmlで

<div class="map">
	<div class="map_inner">
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13317.14899430723!2d135.77275200504937!3d33.4418220455696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6006253f66f02415%3A0x37cedd04b66199ec!2z5pys5bee5pyA5Y2X56uv44Gu56KR!5e0!3m2!1sja!2sjp!4v1743567224516!5m2!1sja!2sjp" width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
	</div>
</div>

.mapにoverflow、iframeにfilterを設定してもダメだったのでoverflowとfilterは分けて書かないように注意してください。

不具合が起こっている状態でfilterを削除すると不具合解消されたのでやはりoverflowとfilterの組み合わせで起こる不具合のようです。