初心者でもできる！GoogleマップをWebサイトに埋め込む方法
ENOWL_Nao
ENOWL（エノウル）
簡単！GoogleマップをCSSだけで白黒にする方法
ENOWL_Nao
どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。
タイトルの通り、iframeで埋め込んだGoogleマップをCSSだけで白黒にする方法です。
まずは、デモです。
直近で対応することがあったので、忘れないように備忘録として残しておきます。
この記事の見出し
ステップ1 HTMLの準備
まず、Googleマップのiframeを作成します。
iframeを作成する方法が分からない方はまずはこちらの記事をご覧ください。
あわせて読みたい
初心者でもできる！GoogleマップをWebサイトに埋め込む方法
iframeタグを任意のタグで囲んでください。
今回は、「map-gray」というクラスをつけたタグで囲んでいます。
<div class="map-gray">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.656784920611!2d139.80812547578913!3d35.710062672577926!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ed0d12f9adf%3A0x7d1d4fb31f43f72a!2z5p2x5Lqs44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1729091831981!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>ステップ2 CSSの追加
次に、iframeを白黒にするために、CSSでfilterプロパティを設定します。
以下のCSSコードを追加してください。
.map-gray iframe {
filter: grayscale(100%);
}これで、iframe内のGoogleマップが白黒表示になります。
まとめ
以上で、Googleマップをiframeで白黒表示にする手順は完了です。
この方法を使えば、簡単にGoogleマップを白黒にカスタマイズできます。
ぜひ試してみてください！
最後までお読みいただき、ありがとうございました！
参考サイト
以下のサイトを参考にさせていただきました。
https://hirashimatakumi.com/blog/7610.html
個人事業主さまの「Web担当」そのWebの悩み
そのWebの悩み
一人で抱え込んでいませんか？
「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？
私について
ホームページをご覧いただきありがとうございます！
なおと申します。
現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。
