Google maps API不要 iframe埋め込みのGoogleMAPのカラーを変更する方法
投稿日：2021.01.21.
更新日：2025.04.12.
デザイン歴 20 年超、500 サイト以上を監修。ブランド戦略をビジュアルへ昇華し、使いやすさと美しさを両立させる UI/UX が持ち味。
3DCG 専門学校卒業後、広告代理店で Web デザイナーとしてキャリアを開始。旅館予約システムや商店街プロモーションなど多業種案件で「伝わるデザイン」の基礎を固めました。
その後、制作部門のリーダーとして 5 年間にわたりチームマネジメントを経験。企画立案から撮影ディレクション、公開後の AB テストまで、クリエイティブとマーケティングの橋渡し役を担ってきました。
2013 年に TREVO を共同設立。現在はデザイン、UI ガイドライン策定やアクセシビリティ監修を担当。
最近の取り組み：AI 生成画像と手描きイラストを組み合わせたブランドビジュアル開発とプロトタイプ検証。
信条：私たちが目指すのは、ホームページ制作を通じてお客様がハッピーになること。そして、そのホームページを訪れるユーザーが心地よく、笑顔になれるような体験を提供し、世の中にポジティブな影響を少しずつ増やしていくことです。
ブログやwebサイトの会社案内などにアクセスマップを表示させる場合、Google Mapを利用することがよくあります。
Google Mapの利用には「GoogleMAP API」と「iframe」で利用できる2つの形式があります。
「GoogleMAP API」を利用する場合は、いろいろとカスタマイズ出来ますが、APIキーや表示回数によって課金されるなど有料化になっています。
一方「iframe」の場合は無料で利用できるがカスタマイズができないようになっています。
今回は「iframe」を使ったGoogle Mapのカラーを変更する方法を説明しています。
GoogleMAP API形式
GoogleMAP APIをつかったMAPでは、マーカを2複数設置、道路だけ色を変更、地図上に線を引いたりするなど、GoogleMAPをオリジナルにカスタマイズできWEBサイトにあった地図に変更することが出来ます。
表現できる自由度は高いく、毎月200ドル分まで利用できますが、無料条件を超過した場合は料金が発生します。アクセス数が多いサイトなどは直ぐに課金になってしまいます。
iframe形式
iframe形式の場合は利用料金が発生せず無料でGoogleMAPを使うことが出来ます。
API形式が無料で使えていた時はあまり利用する事がなかったのですが、API形式が有料になって以降は、iframe形式が利用されることが多くなりました。
iframe形式では、ほどんどカスタマイズすることはできませんが、設置方法が簡単で専門知識がなくてもWEBサイトに設置することが出来ます。
GoogleMAPのカラーを変更
iframe形式のGoogleMAPのカラーを変更すにはcssの「filter」プロパティを使います。
※カッコ()内の数値は自由に変更してください。
オリジナル
白黒50％
filter:grayscale(50%)
白黒100％
filter:grayscale(100%)
セピア
filter:sepia(50%)
彩度変更
filter:saturate(150%)
色相変更
filter: hue-rotate(300deg)
階調反転
filter: invert(80%)
まとめ
「GoogleMAP API」を利用しなくてもCSSの「filter」プロパティを使えば「iframe」でGoogleMAPの色を変更することが出来ます。
GoogleMAPのカラーを変更すだけでもサイトの雰囲気はずいぶん変わります。
「filter」プロパティを細かく調整してサイトにあったGoogleMAPを設置してみてはいかがでしょうか。
