名古屋市のフロントエンドエンジニアがWEB制作に関する技術メモを書いています

メニュー

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

最終更新日:

公開日:2014年02月22日

その他

※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 マップ」に切り替える方法を記載しておきます。

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

Google マップ

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

Google マップ2

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

Google マップ3

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

Google マップ4

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

株式会社アットノエル Google マップ

「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=600x300&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は仕様変更される場合がありますので、ご注意ください。

関連記事

Twitterにて更新情報などを配信しています

スポンサードリンク