ブログ上にGoogleマップを <iframe> で埋め込んでみたんだけど、イマイチしっくりこない。主張が強すぎて、なじまない感じ。かと言って、デザイン的に色々しようと思っても、 けっこう面倒。とりあえず CSS だけでなんとかしてみます。

ブログに地図を埋め込むならGoogleマップ

ブログ上で地図を表示する場合、何かと便利なのはやっぱりGoogleマップ。
この地図を自分のブログで表示する方法は、いくつかあって、

1. Googleマップで「地図を共有または埋め込む」
2. Googleマイマップで「共有」して埋め込む
3. Google Map APIを利用して埋め込む

（1）は、設定がとっても簡単。でもデザイン的には融通がきかない。表示されたマップは左上に情報ウィンドウみたいなのがあって、小さい表示だと、見づらいし邪魔。消す方法もあるにはあるようなんだけど、手間がかかって面倒そう。

（2）のマイマップを使うのがデザイン的にもなんとかなりそうなので、今回はこれでいってみようと思います。

（3）APIを使うのは、デザインも自由にカスタマイズできて、思い通りに表示できそう。だけど、色々コードを打ち込んだり、基本有料だし、これまた大変そうなので、今回はパス。

Googleマイマップを埋め込む

Googleマイマップを開いて、新しい地図を作ります。マイマップに新しい場所を登録して、場所の名前や説明文を編集します。
あとは、ピンのアイコンや色も変えられますので、収録されているアイコンから良さげなのを選んで下さい。カスタムアイコンも設定できます。
その場所の写真も登録できます。店舗などは、お店の写真を登録しておくとわかりやすいかもね。
地図の種類も選べます。航空写真とか、ダークモードとか。

で、「共有」をクリックして <iframe> を使ってブログに表示します。

マイマップで地図を作成してブログに埋め込む（<iframe> をコピーして貼り付ける）ところまでは、ネット上にたくさん情報があるので、そちらを参考にして下さい。

私は、こちらのサイトにお世話になりました。わかりやすいです。

Googleマイマップでカスタマイズした地図を自分のサイトやブログに埋め込む方法：TOMONO Tech-Blog

さらに、<iframe> 内に追記オプションで地図の中心位置を決めたり、表示モードを変えたり、縮尺を変更する場合はこちらを参考に

Google Mapをiframeで利用する際のオプションとレスポンシブ対応させるためのHTMLとCSSを紹介（住所指定で表示もできるよ！）：Olein Design

まずは、マイマップから「共有」で iframe をコピーします。中身を見てみるとこんな感じ。

<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F" width="640" height="480"></iframe>

表示サイズは、width,height いずれもレスポンシブ対応のため100％にしておきます。

src のところにオプションで中心位置と地図の縮尺を追加します。

中心位置は,Googleマイマップで座標をコピペ。

ll=43.76697, 142.48322

縮尺は、とりあえず14くらい？後から調整すればOK（0から23まで指定できます）

Z=17

「＆」でつないで、追加します。

<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F&ll=43.76697, 142.48322&z=14" width="100%" height="100%"></iframe>

後は、CSS で見た目を調整していきます。

CSS で埋め込みマップの黒帯を消す

最初にレスポンシブ対応のためサイズを100％にしましたが、それだけではレスポンシブデザインにはならないので、<iflrame> を囲むように外側に要素を配置します。

<div class="map">
<iframe src="https://www.google.com/maps/d/embed?mid=1N187HOMmPN-ZIGeHOfv6A98pbaPJ9co&ehbc=2E312F&ll=43.76697, 142.48322&z=14" width="100%" height="100%"></iframe>
</div>

<div class=”map”> に CSS で幅と高さを指定します。

幅は、最大600pxとして、 max-width: 600px;

高さは、height: 450px くらいにしておきましょうか。

これで、パソコン画面で見た時は、幅600pxが上限。スマホは、画面サイズに合わせて縮小されます。

ところで、上部の黒い帯をなんとかしたくなりません？
マイマップの情報を開いたり、拡大地図を開いたりとそれなりに役目はあるんだけど、ちょっと目立ちすぎ。
早速消しちゃおうと思ったんだけど、これがまた厄介だ。<iframe> 内で表示されているものだから、単純に CSS で直接いじろうとしても、うまくいかない。いろいろ検索してみたけど、難しそうな方法ばかり。

あんまり複雑にしないで、手っ取り早く見えなくしてみます。

<iframe>に CSS で margin-top: -60px; を指定します。
これは、帯部分の最大高さ。場合によっては、46px だったり 59px だったりするみたいなので、60px 分とっておけば大丈夫かと思います。帯の分だけ、上方向にずらしています。

<div class=”map”> には overflow: hidden; を指定してはみだした分を見えなくします。

あとは、好みに合わせて、少し色の調子を整えてみます。あんまり地図ばっかり目立ってもしょうがない、という場合に。

CSS で <iframe> に filter: grayscale(70%); を追加してみます。

.map {
	max-width: 600px;
	height: 450px;
	overflow: hidden;
}

.map iframe {
	margin-top: -60px;
	filter: grayscale(70%);
}

ブログに合わせて、背景に馴染みつつスッキリ表示されたでしょうか。