Googleマップの埋め込み│API不要で簡単カスタマイズ

2026-05-012026-07-20

Googleマップを表示するには

GoogeマップをWebページに表示する方法として、GoogleマップAPIを使用する方法と、公開されている埋め込みコードを使用しWebページに埋め込んで表示する方法があります。

埋め込みコードは簡単でトラブルも少なく、大規模なカスタマイズを行わないなら埋め込みコードで十分と考えます。

Googleマップにて地点を指定し、「共有」→「地図を埋め込む」　からHTMLコードを生成することができます。

コードはそのままコピーしWebページのHTMLに記述することで表示できます。埋め込みコードは<iframe>（インラインフレーム）のため、Webページ内に別サイトとなるGoogleマップを読み込んで表示しています。（インラインフレーム要素）

埋め込みコードにより表示したGoogleマップは、細かなカスタマイズはできませんが、これから紹介するような色や表示のカスタマイズは無料でできます。

Webサイトの雰囲気やトンマナに合わせてカスタマイズが可能です。

デフォルト

CSSのfilterプロパティを使用してGoogleマップの色合いを変更できます。

グレースケール50%

.googlemap {
	filter: grayscale(.5);
}

グレースケール100%

.googlemap {
	filter: grayscale(1);
}

セピア25%

.googlemap {
	filter: sepia(.25);
}

階調反転

.googlemap {
	filter: invert(100%);
}

色循環90%

.googlemap {
	filter: hue-rotate(90deg);
}

色循環180%

.googlemap {
	filter: hue-rotate(180deg);
}

色循環270%

.googlemap {
	filter: hue-rotate(270deg);
}

階調反転 & 色循環180%

.googlemap {
	filter: invert(100%) hue-rotate(180deg);
}

CSSのブレンドモードを使用してGoogleマップに指定色をブレンド表示することもできます。

ブレンド「青」

.googlemap{
	background: #0099ff;
}
.googlemap iframe{
	filter: grayscale(1);
	mix-blend-mode: hard-light;
}

ブレンド「赤」

.googlemap{
	background: #ff7777;
}
.googlemap iframe{
	filter: grayscale(1);
	mix-blend-mode: hard-light;
}

ブレンド「緑」

.googlemap{
	background: #32cb32;
}
.googlemap iframe{
	filter: grayscale(1);
	mix-blend-mode: hard-light;
}

iframeのマップパラメーターを変更することで、表示モードを変更できます。

表示モード（t）：表示モードをパラメーターで指定

地図の縮尺（z）：0から23までの整数で地図の拡大率（ズーム）を指定

言語（hl）：言語をパラメーターで指定

航空写真・縮尺17

Google Eearth・尺度40

韓国語

よかったらシェアしてね！