「Google マップ」の埋め込み地図をカスタマイズする方法まとめフラップイズム

※2014年3月12日更新
「Google マップ」は2月にバージョンアップされています。
操作性が大きく変わっていますので、説明を加えました。
なお、「Google Maps JavaScript API v3」を使用している部分には変更ありません。
このまま使用できます。

※2014年3月26日更新
bodyのjavascriptの関数を読み込む記述が消えてしまっていましたので、修正しました。
申し訳ございません・・・。

※2016年8月31日更新
2016年6月22日に「Google マップ」のAPIが変更され、APIキーが必須になりました。
なお、APIを使用せずに埋め込む場合はAPIキーは引き続き必要ありません。

どうも、くーへいです。

最近ではない方が珍しいと思うくらい、「Google マップ」を埋め込んだホームページは多いですよね。
制作会社にいる皆さんは、「サクッ」っと埋め込んでいることと思います。

しかし、使っているといろいろと変えたい部分が出てきませんか？

周りの配色と合わせたい！
マーカーは独自の画像を使いたい！
いっぱい埋め込んだら速度が遅い！

そんな悩みを解決しましょう！

普通に挿入する方法

ちなみに、新バージョンの「Google マップ」では埋め込まれるタグが異なります。
現時点では、とりあえず旧バージョンの「Google マップ」に切り替える方法を記載しておきます。

まず、地図の左上にある、メニューボタンをクリックしてください。

開いたメニューの中腹にある、「地図を共有または埋め込む」をクリックします。

表示されたウインドウの「地図を埋め込む」タブに表示されているHTMLをコピーペーストすれば、埋め込み完了です。

なお、下記画像の赤い部分、「中」と書かれた部分を選択すると、大きさを変更できます。
「カスタム」を選択すれば、ピクセル指定も可能です。

また、マップでピンが表示されている状態で上記の手順を行えば、ピンを表示したマップを埋め込むことも可能です。

「Google マップ」カスタマイズの基本は「Google Maps JavaScript API」を使用する

「Google Maps JavaScript API v3」は、読んで字のごとく、「JavaScript」を使用して「Google マップ」を編集する「API」です。

APIキーは、現在のところ必要としません。
しかし、APIキーを使用するようにマニュアルでは記載されており、今後必須となる可能性があります。
その場合、1日あたり25,000回の読み込みが許可されます。
ご心配な場合は、必ずAPIキーを使用してください。
2016年6月22日以降、APIキーが必須になりました。
ご注意ください。
（本記事では取得方法や設定方法は解説していません。）

「JavaScript」のファイルを読み込み、コードを記載、body要素に一文を追記した上で入れ物を作れば描画されます。

使用するには、まず、下記の「JavaScript」ファイルを読み込んでください。
場所は「header」要素で無くても構わないようです。

<script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=【マップを描画する関数名。ここではinitialize】" async defer></script>

次に、下記コードを記入します。
インラインで記載しても、外部ファイルに記載しても構いません。

サンプルとして、名古屋市の住所を読み込んでいます。
31行目の「名古屋市」の部分を変更すると、マップの中心が変更されます。

function initialize() {
	/*----- 仮の位置を定義 -----*/
	var latlng = new google.maps.LatLng(34,135);

	/*----- ベースマップのオプション定義 -----*/
	var myOptions = {
		zoom: 16,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	/*----- マップの描画 -----*/
	var map = new google.maps.Map(document.getElementById('map_basic'), myOptions);

	/*----- アイコンのオプション定義 -----*/
	var markerOptions = {
		position: latlng,
		map: map,
		title: ''
	};

	/*----- マーカー描画 -----*/
	var marker = new google.maps.Marker(markerOptions);

	/*----- ジオコーディングを定義 -----*/
	var geocoder = new google.maps.Geocoder();

	/*----- ジオコーディングを実行 -----*/
	geocoder.geocode({
		'address':'名古屋市'
	},function(results, status){
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			marker.setPosition(results[0].geometry.location);
		}
	});
}

あとは、入れ物となる要素を以下のように作ります。
なお、widthやheightはCSSでの指定では効きません。
必ずインラインで記載してください。
インラインであればパーセンテージでの指定も有効です。
インラインでなくとも、CSSが適用できるようになりました。
パーセンテージ指定も有効です。


<div id="map_basic"></div>

「Google マップ」の配色を変更する

せっかくデザインしたサイトなのに、「Google マップ」だけ色が合わなくて浮いている・・・と思ったことはありませんか？
私はデザイナーではないのですが、デザイナーからはそういう意見もよく聞かれます。

前項で記載したコードを少し変更することで、「Google マップ」の配色を変更することができます。
以下は、その例です。

function initialize() {
	/*----- 仮の位置を定義 -----*/
	var latlng = new google.maps.LatLng(34,135);

	/*----- ベースマップのオプション定義 -----*/
	var myOptions = {
		zoom: 16,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	/*----- スタイルを定義 -----*/
	var styles = [
		{
			"featureType": "road.local",
			"elementType": "geometry.fill",
			"stylers": [
				{ "color": "#808080" }
			]
		}
	];

	/*----- スタイル名の指定 -----*/
	var styleName = 'MyStyle';

	/*----- マップの描画 -----*/
	var map = new google.maps.Map(document.getElementById('map_basic'), myOptions);

	/*----- スタイルの適用 -----*/
	map.mapTypes.set(styleName, new google.maps.StyledMapType(styles, { name: styleName }));
	map.setMapTypeId(styleName);

	/*----- アイコンのオプション定義 -----*/
	var markerOptions = {
		position: latlng,
		map: map,
		title: ''
	};

	/*----- マーカー描画 -----*/
	var marker = new google.maps.Marker(markerOptions);

	/*----- ジオコーディングを定義 -----*/
	var geocoder = new google.maps.Geocoder();

	/*----- ジオコーディングを実行 -----*/
	geocoder.geocode({
		'address':'名古屋市'
	},function(results, status){
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			marker.setPosition(results[0].geometry.location);
		}
	});
}

12～24、29～31行目が追加したコードです。
12～24行目では変更するスタイルを指定し、29～31行目ではそのスタイルへの変更を指示しています。

スタイルの書き方は複雑ですが、Googleの提供する「Google Maps API Styled Maps Wizard」を使用すれば、プレビューしながらスタイルのコードを生成できます。
目的の配色に変更したら、右にある「Map Style」というウインドウの下部「Show JSON」をクリックすればコードが生成されます。
生成したコードは、13～21行目を置き換えることで適用できます。
（もちろん、「var styles = 」や最後の「;」は消さないようにしてください。）

「Google マップ」のマーカーのアイコンを変更する

「Google マップ」の、あのピンクのアイコンを変えたい・・・。
これもデザイナーの方からよく聞くことです。

マーカーのアイコンも、前項と同様にして変更できます。
下記はその例です。

function initialize() {
	/*----- 仮の位置を定義 -----*/
	var latlng = new google.maps.LatLng(34,135);

	/*----- ベースマップのオプション定義 -----*/
	var myOptions = {
		zoom: 16,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};

	/*----- マップの描画 -----*/
	var map = new google.maps.Map(document.getElementById('map_basic'), myOptions);

	/*----- アイコンの定義 -----*/
	var icon = new google.maps.MarkerImage(
		'map_icon.png',
		new google.maps.Size(28,47),
		new google.maps.Point(0,0)
	);

	/*----- アイコンのオプション定義 -----*/
	var markerOptions = {
		icon: icon,
		position: latlng,
		map: map,
		title: ''
	};

	/*----- マーカー描画 -----*/
	var marker = new google.maps.Marker(markerOptions);

	/*----- ジオコーディングを定義 -----*/
	var geocoder = new google.maps.Geocoder();

	/*----- ジオコーディングを実行 -----*/
	geocoder.geocode({
		'address':'名古屋市'
	},function(results, status){
		if (status == google.maps.GeocoderStatus.OK) {
			map.setCenter(results[0].geometry.location);
			marker.setPosition(results[0].geometry.location);
		}
	});
}

基本の地図のコードからは、15～20、24行目に追記があります。
17行目に画像のパス、18行目に画像のサイズ、19行目にマーカーからの位置を指定できます。

「Google マップ」を画像にして貼り付ける

「Google マップ」を複数埋め込んだらとっても表示が重い！ということもありますよね。
例えば、営業所がたくさんあって、それぞれに「Google マップ」を貼り付けたいというケースに該当すると思います。

単純に画像を貼り付けるだけならば「スクリーンショット」でも可能です。
しかし、「地図の配色やアイコン画像を変更したい・・・」、、「でも複数のマップを載せなければならない・・・」、「表示が遅いのは嫌だ！」
そんなワガママを叶えられるのはこの方法以外にはないでしょう。

「Google マップ」を画像として貼り付けるには、「Google Static Maps API v2」を使用します。
APIを使用しますが、上記のように複雑ではなく、URLにパラメーターを使用することで実現でき、色の変更やアイコン画像の変更も可能です。

簡単な例ですと、「http://maps.googleapis.com/maps/api/staticmap?center=名古屋市&zoom=16&size=600×300&sensor=false」とすると、名古屋市が中心の地図が画像で取得できます。
※「Google Static Maps API v2」は現在のところ、APIキーが指定されていなくても表示できていますが、こちらも今後必須になる可能性もあります。
サイトで表示するには、

<img alt="名古屋市" src="http://maps.googleapis.com/maps/api/staticmap?center=名古屋市&zoom=16&size=600x300&sensor=false" width="600" height="300" />

このようになります。

色を変更する

前述した、「Google Maps API Styled Maps Wizard」は、「Google Static Maps API v2」のURLも吐き出すことができます。
スタイルを変更したら、「Static Map」をクリックしてください。
例えば、本記事の”「Google マップ」の配色を変更する”で使用したスタイルだと、

http://maps.googleapis.com/maps/api/staticmap?center=35.181622,136.906171&amp;zoom=17&amp;format=png&amp;sensor=false&amp;size=640x480&amp;maptype=roadmap&amp;style=feature:road.local|color:0x808080

というURLが生成されます。

あとは、「center」や「zoom」、「size」を任意の値に変更すれば、地図が完成します。

アイコンを変更する

まず、アイコンを表示するには、以下のように指定します。

「&markers=名古屋市」

上記の「色を変更する」で記載したURLに合わせて書くと以下の通りです。

http://maps.googleapis.com/maps/api/staticmap?center=名古屋市&amp;zoom=16&amp;format=png&amp;sensor=false&amp;size=600x300&amp;maptype=roadmap&amp;style=feature:road.local|color:0x808080&amp;markers=名古屋市

下記のようにして、アイコンの色も変更できます。

「・・・&markers=color:blue|名古屋市」
（・・・部分は省略）

「|」で区切ることで、複数のアイコンも設置できます。

「・・・&markers=color:blue|名古屋市|愛知県庁」

下記のようにして、複数のアイコンの色を別の色に変更することもできます。

「・・・&markers=color:blue|名古屋市&markers=color:red|愛知県庁」

アイコンを任意の画像にするには以下の通りです。

「・・・&markers=icon:map_path.png|名古屋市」

最後に

今回は「Googleマップ」のカスタマイズについて書いてみましたが、いかがでしたでしょうか？

動的に地図を埋め込む方法と、静的な方法とを紹介しましたが、どちらも一長一短と言ったところです。

動的に埋め込めば、その場で地図を見ていただけるので、離脱率の低減に貢献してくれそうです。
一方で動的な地図は、1つの地図の読み込みに0.7秒程度かかっているようです。
静的な地図は1つの地図につき0.1秒程度でした。
（いずれも「Chrome」の「デベロッパー・ツール」にて簡易的に計測しましたので、あくまで参考程度にとらえてください。）

1つの地図のみの場合は動的、2つ以上は静的とした方が良いかもしれません。

※APIは仕様変更される場合がありますので、ご注意ください。