Google Maps APIでマーカーのサイズを変更する

Google Maps APIでマーカーを独自画像で設置した際、マップの倍率によってピンのサイズを変更したいということがあったので、マーカーのサイズ変更を試してみました。

サンプルコード

地図を設置するエリアを用意します。

HTML

<div id="map"></div>

Google Maps APIの読み込みを追加します。

<script src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=init"></script>

地図のサイズを指定します。

CSS

#map {
    width: 600px;
    height: 400px;
}

マーカーの画像を用意します。
今回は以下の2つを設置してみます。

実際にJavaScriptでマーカーの設置を行います。
マーカーを2本設置して、青のマーカーのサイズを半分にしてみます。

まずは最初に試してうまくいかなかった例です。

JavaScript

var map;
var marker1, marker2;
var mapOptions = {
	center: { // 地図の緯度経度
		lat: 35.700400,
		lng: 139.771700
	},
	zoom: 20 // 地図の拡大率
}
var markerData = [
	{
		lat: 35.700430,
		lng: 139.771720
	}, {
		lat: 35.700366,
		lng: 139.771713
	}
];

/**
 * マップとマーカーの埋め込み
 */
function init() {
	map = new google.maps.Map(document.getElementById('map'), mapOptions);

	// マーカー1の設置
	marker1 = new google.maps.Marker({
		position: markerData[0],
		map: map,
		icon: 'marker_red.png'
	});
	// マーカー2の設置
	marker2 = new google.maps.Marker({
		position: markerData[1],
		map: map,
		icon: {
			url: 'marker_blue.png',
			size : new google.maps.Size(19, 25)
		}
	});
}

マーカーの画像サイズは38px × 50pxなので、38行目でその半分を指定するようにしています。
これでうまくいくかと思ったのですが、青色のマーカーが切れてしまっています。
うまくいかなかった場合のデモページ

実際の画像サイズと表示サイズが異なる場合、sizeではなくscaledSizeを使えばいいようです。

var map;
var marker1, marker2;
var mapOptions = {
	center: { // 地図の緯度経度
		lat: 35.700400,
		lng: 139.771700
	},
	zoom: 20 // 地図の拡大率
}
var markerData = [
	{
		lat: 35.700430,
		lng: 139.771720
	}, {
		lat: 35.700366,
		lng: 139.771713
	}
];

/**
 * マップとマーカーの埋め込み
 */
function init() {
	map = new google.maps.Map(document.getElementById('map'), mapOptions);

	// マーカー1の設置
	marker1 = new google.maps.Marker({
		position: markerData[0],
		map: map,
		icon: 'marker_red.png'
	});
	// マーカー2の設置
	marker2 = new google.maps.Marker({
		position: markerData[1],
		map: map,
		icon: {
			url: 'marker_blue.png',
			scaledSize : new google.maps.Size(19, 25)
		}
	});
}

これで意図した表示にできました。
対応後のデモページ
　

動的にサイズを変更する

マーカーのサイズ変更自体はできましたが、冒頭で書いたようにマップの倍率によってマーカーのサイズを変更したい場合、マップの倍率変更のイベントでマーカーの画像設定を変更する必要があります。
マップの倍率変更のイベントはzoom_changed、マーカーの画像設定変更はmarker.setIcon()で行えます。

var map;
var marker1, marker2;
var mapOptions = {
	center: { // 地図の緯度経度
		lat: 35.700400,
		lng: 139.771700
	},
	zoom: 20 // 地図の拡大率
}
var markerData = [
	{
		lat: 35.700430,
		lng: 139.771720
	}, {
		lat: 35.700366,
		lng: 139.771713
	}
];

/**
 * マップとマーカーの埋め込み
 */
 function init() {
	map = new google.maps.Map(document.getElementById('map'), mapOptions);

	// マーカー1の設置
	marker1 = new google.maps.Marker({
		position: markerData[0],
		map: map,
		icon: 'marker_red.png'
	});
	// マーカー2の設置
	marker2 = new google.maps.Marker({
		position: markerData[1],
		map: map,
		icon: 'marker_blue.png'
	});

	console.log('ズーム値:', map.getZoom());
	// ズーム値変更時
	map.addListener('zoom_changed', function() {
		console.log('ズーム値:', map.getZoom());
		// 20未満の場合はマーカーサイズ縮小
		if(map.getZoom() < 20) {
			// マーカー1のサイズ変更
			marker1.setIcon({
				url: 'marker_red.png',
				scaledSize : new google.maps.Size(19, 25)
			});
			// マーカー2のサイズ変更
			marker2.setIcon({
				url: 'marker_blue.png',
				scaledSize : new google.maps.Size(19, 25)
			});
		// 20以上の場合はマーカーサイズを戻す
		} else {
			marker1.setIcon('marker_red.png');
			marker2.setIcon('marker_blue.png');
		}
	});
}

setIcon()を使った場合のデモページ

マーカーの画像以外の設定も合わせて変更したい場合、marker.setIcon()の代わりにmarker.setOptions()でも可能です。

var map;
var marker1, marker2;
var mapOptions = {
	center: { // 地図の緯度経度
		lat: 35.700400,
		lng: 139.771700
	},
	zoom: 20 // 地図の拡大率
}
var markerData = [
	{
		lat: 35.700430,
		lng: 139.771720
	}, {
		lat: 35.700366,
		lng: 139.771713
	}
];

/**
 * マップとマーカーの埋め込み
 */
 function init() {
	map = new google.maps.Map(document.getElementById('map'), mapOptions);

	// マーカー1の設置
	marker1 = new google.maps.Marker({
		position: markerData[0],
		map: map,
		icon: 'marker_red.png'
	});
	// マーカー2の設置
	marker2 = new google.maps.Marker({
		position: markerData[1],
		map: map,
		icon: 'marker_blue.png'
	});

	console.log('ズーム値:', map.getZoom());
	// ズーム値変更時
	map.addListener('zoom_changed', function() {
		console.log('ズーム値:', map.getZoom());
		// 20未満の場合はマーカーサイズ縮小
		if(map.getZoom() < 20) {
			// マーカー1のサイズ変更
			marker1.setOptions({
				icon: {
					url: 'marker_red.png',
					scaledSize : new google.maps.Size(19, 25)
				}
			});
			// マーカー2のサイズ変更
			marker2.setOptions({
				icon: {
					url: 'marker_blue.png',
					scaledSize : new google.maps.Size(19, 25)
				}
			});
		// 20以上の場合はマーカーサイズを戻す
		} else {
			marker1.setOptions({
				icon: 'marker_red.png'
			});
			marker2.setOptions({
				icon: 'marker_blue.png'
			});
		}
	});
}

setOptions()を使った場合のデモページ
　

【参考サイト】

• Marker  |  Maps JavaScript API  |  Google Developers
• Markers  |  Maps JavaScript API  |  Google Developers