Webサイト制作 無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ！Webサイトのデザインテイストに合わせるやり方とは！？
-
浜松本社 ディレクター 深谷
- 2018.10.31
こんにちは。クリエイティブプランナーの深谷です。
以前投稿した「まだ間に合う!? 7月16日以降もGoogle Maps APIの地図を無料で使い続ける方法とは?」はご覧いただけたでしょうか？
2018年7月以降もGoogle Maps APIを利用したサイトが正常に見れておりましたが、
9月に入ってから正しく読み込まれないケースが多発し、
弊社でもGoogle Maps APIから、iframeやマイマップへ移行するケースが増えてまいりました。
今回はGoogleマイマップをカスタマイズして、
オリジナルのデザインを適用する方法をご紹介いたします。
Googleマイマップの作り方
【1】ログイン
Googleマイマップへアクセスし、Googleアカウントでログイン。
https://www.google.com/maps/d/?hl=ja
【2】新しい地図を作成
【3】地図のタイトルと説明文を編集
【4】地図にピンを追加
カスタムアイコンについて
【1】他のアイコン
【2】カスタムアイコン
マップのピンがオリジナルデザインに変更されます。
基本地図の配色変更
【1】基本地図
デフォルトで用意されてる9種類のデザインから選べます。
CSSで配色をカスタイズ
また、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マイマップを導入してみてはいかがでしょうか？
CMAブログをGoogle検索で見つけやすくしたい方はこちら
この記事の著者
浜松本社 ディレクター 深谷
2016年入社
幅広い業種のWebサイト制作を手がけるクリエイティブディレクター。ランディングページやバナー制作を得意とし、ユーザー目線に立った導線設計で成果につながるクリエイティブを制作している。
【保有資格】
上級ウェブ解析士
SEO検定1級
