フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【API不要】Google Mapsの色をCSSで変更する方法

API不要
Google Maps
iframe

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

Google Mapsの色を変更したり、ピンをロゴに変更したりする場合、Google Maps APIを使用することで様々なカスタマイズをすることが可能です。
ただ、Google Maps APIを使用する場合、表示回数の多いサイトの場合、料金がかかってきます。導入するハードルは上がってしまいました。
そのため今回はGoogle Maps APIを使用せず、CSSのみでGoogle Mapsの色を変更する方法をご紹介します。

通常のGoogle Mapsを埋め込む方法

埋め込みたいGoogle Mapsを開き「共有」をクリックします。

ポップアップで表示される画面内の「地図を埋め込む」を選択し、「HTMLをコピー」をクリックします。

コピーされたHTMLをhtmlソース上に貼り付けます。

<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3239.663210352091!2d139.80812331561262!3d35.7099045860055!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1z44K544Kr44Kk44OE44Oq44O8!5e0!3m2!1sja!2sjp!4v1655810052588!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Google Mapsの色設定CSS追加方法

<iframe>内のstyle=""部分にcssを追加していきます。

モノクロ

filter:grayscale(100%);-webkit-filter:grayscale(100%)

色相変更

filterプロパティにhue-rotateを設定すると色相(0deg~360deg)が設定できます。

filter:hue-rotate(200deg);-webkit-filter:hue-rotate(200deg)

階調反転

filterプロパティにinvertを設定すると階調を反転できます。

filter:invert(50%);-webkit-filter:invert(50%)

まとめ

Google Maps APIを使用しなくても、CSSのみで色を変更することが可能です。ただし、ピンをロゴに変えたり、特定の要素を調整したりなどはCSSのみでは難しくAPIを使用する必要があります。
ただしAPIを使用するよりもハードルは低いので是非挑戦してみてください。