無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ！Webサイトのデザインテイストに合わせるやり方とは！？｜CMAブログ

ホームページ制作無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ！Webサイトのデザインテイストに合わせるやり方とは！？

浜松本社ディレクター深谷
2018.10.31

Google my map

こんにちは。クリエイティブプランナーの深谷です。

以前投稿した「まだ間に合う!? 7月16日以降もGoogle Maps APIの地図を無料で使い続ける方法とは?」はご覧いただけたでしょうか？

2018年7月以降もGoogle Maps APIを利用したサイトが正常に見れておりましたが、
9月に入ってから正しく読み込まれないケースが多発し、
弊社でもGoogle Maps APIから、iframeやマイマップへ移行するケースが増えてまいりました。

今回はGoogleマイマップをカスタマイズして、
オリジナルのデザインを適用する方法をご紹介いたします。

目次
Googleマイマップの作り方
カスタムアイコンについて
基本地図の配色変更
CSSで配色をカスタイズ
まとめ

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マイマップの配色とアイコンを自由にカスタマイズ！Webサイトのデザインテイストに合わせるやり方とは！？