静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

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 2019/02/042019年1月Google for Jobsが日本上陸!Googleしごと検索で上位表示させる構造化マークアップの実装方法とは?

  • posted on 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

  • posted on 2021/07/08初心者の私にもできた。自作パソコンの組み立てに挑戦してみた!

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

Top