CMA BLOG
株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > 無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ!Webサイトのデザインテイストに合わせるやり方とは!?
CMA BLOG
株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > 無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ!Webサイトのデザインテイストに合わせるやり方とは!?
こんにちは。クリエイティブプランナーの深谷です。
以前投稿した「まだ間に合う!? 7月16日以降もGoogle Maps APIの地図を無料で使い続ける方法とは?」はご覧いただけたでしょうか?
2018年7月以降もGoogle Maps APIを利用したサイトが正常に見れておりましたが、
9月に入ってから正しく読み込まれないケースが多発し、
弊社でもGoogle Maps APIから、iframeやマイマップへ移行するケースが増えてまいりました。
今回はGoogleマイマップをカスタマイズして、
オリジナルのデザインを適用する方法をご紹介いたします。
Googleマイマップへアクセスし、Googleアカウントでログイン。
https://www.google.com/maps/d/?hl=ja
マップのピンがオリジナルデザインに変更されます。
デフォルトで用意されてる9種類のデザインから選べます。
また、CSSのfilterプロパティを利用すれば、
Webサイトのテイストに合わせて簡単にカスタマイズが可能です。
※対応ブラウザ(IEを除くEdge、Chrome、firefoxのみ)
.mymap { overflow: hidden; } .mymap iframe { margin-top: -48px; margin-left: -2px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
GoogleマイマップやCSSのfilterプロパティを利用すれば、
無料で配色とアイコンを自由にカスタマイズが可能です。
Google Maps APIの不具合でお悩みの方は、
ぜひこの機会にカスタマイズしたGoogleマイマップを導入してみてはいかがでしょうか?
Top