株式会社シーエムエー

053-459-1510

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > 無料でGoogleマイマップの配色とアイコンを自由にカスタマイズ!Webサイトのデザインテイストに合わせるやり方とは!?

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

  • このエントリーをはてなブックマークに追加

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

以前投稿した「まだ間に合う!? 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マイマップを導入してみてはいかがでしょうか?

人気の記事ランキング

  • posted on 2018/07/05まだ間に合う!? 7月16日以降もGoogle Maps APIの地図を無料で使い続ける方法とは?

  • posted on 2018/05/23Google Chromeで動画が再生されない

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2018/05/30HTML5広告でクリック率が3.1倍にUP!

  • posted on 2018/09/05Zapierを使ってブログとSNS(Twitter・Facebook)を自動連携!トラフィック増大でSEO対策も

Top