超簡単！GoogleMapの色をサイトにあわせて変える方法

サイトでよく見かけるGoogleMapの埋め込み。

しかしいざ埋め込むと、サイトのデザインとGoogleMapのカラフルな色が合わず、
「埋め込みたいけど、サイトに合わない！」といったことになりがちです。

そこで今回は、GoogleMapの埋め込みで、マップの色を変える超簡単な裏技をお教えします。

そもそもGoogleMapの埋め込みとは

おそらくみなさんも一度はサイトで見かけたことがあるのではないでしょうか。

このように、文字を押すとGoogleMapに飛べる！という状態ではなく、
GoogleMapそのものがリンクとして載っている状態を”埋め込み”といいます！

GoogleMapの埋め込み方法

埋め込み方法はいたって簡単です。

載せたいマップの「共有」→「地図を埋め込む」からコピーしたHTMLコードをサイトのHTMLファイルにコピペするだけ！

これだけでマップの埋め込み自体は完了します。

しかし、例えば載せるサイトがモノトーン調であったり、特定の色しか使っていないサイトだと、
GoogleMapのカラフルな色でせっかくの統一感がなくなってしまいます。

そこで今回は、GoogleMapの色を簡単に変える方法をお教えします！

GoogleMapの色をサイトにあわせて変える方法とは…？

超簡単！cssにコードをコピペするだけ！

答えは超簡単！
cssにコードをコピペするだけです！

モノトーン調

.ifram{
   filter: grayscale(100%);
   transition: all 0.7s ease;
}

ピンクテイスト

.ifram{
　filter: hue-rotate(100deg);
　-webkit-filter: hue-rotate(100deg);
}

黒テイスト

.ifram{
　filter: invert(1)
　-webkit-filter: invert(1);
}

セピア(レトロな感じに)

.ifram{
   filter: sepia(100%);
   transition: all 0.7s ease;
}

まとめ

いかがでしたか？

web制作の現場でよくあるGoogleMapの埋め込み。

今回は色を変える裏技をお教えしました！

今後「GoogleMapを埋め込みたいけど、色が合わない！」といった際にぜひ参考にしてみてください！

こちらもおすすめ

コーディング

2022.05.31

超簡単！GoogleMapの色をサイトにあわせて変える方法

サイトでよく見かけるGoogleMapの埋め込み。 しかしいざ埋め込むと、サイトのデザインとGoogleMapのカラフルな色が合わず、「埋め込みたいけど、サイト…