カスタムしたGoogleマップを一つのページに複数設置する方法

webサイトを見ていると普段見慣れているGoogleマップではなく、独自のアイコンを使用したり、色がカスタムされたマップを見かける事があります。

例えばこういうのですね。

このようにGoogleマップは色や表示させる内容などをカスタムする事が可能で、以下のサイトなどで直感的に自分の好みのスタイルなどを作成する事が可能です。

Google Maps APIs Styling Wizard

今回細かい使用方法などは省きますがカスタムした地図を一つのページにつき一つだけ表示する事はそこまで難しくないかなと思います。
ただ、カスタムされた地図を一つのページに複数設置する場合は結構手間がかかります。
例えば会社案内のページであちこちに支社があり、その一つ一つにマップを表示するような場合ですね。

これが最適解ではないと思うのですが、この方法で複数の地図を設置する事はできました。

function initialize() {
	//地図スタイルの設定
	var styleArray = [{
		"stylers": [{
			"visibility": "on"
		}]
	}, {
		"elementType": "geometry",
		"stylers": [{
			"color": "#f5f5f5"
		}]
	}, {
		"elementType": "geometry.fill",
		"stylers": [{
			"color": "#f3f3f3"
		}, {
			"visibility": "on"
		}]
	}, {
		"elementType": "geometry.stroke",
		"stylers": [{
			"visibility": "on"
		}]
	}, {
		"elementType": "labels",
		"stylers": [{
			"visibility": "on"
		}]
	}, {
		"elementType": "labels.icon",
		"stylers": [{
			"visibility": "on"
		}]
	}, {
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#617171"
		}]
	}, {
		"featureType": "administrative.land_parcel",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#bdbdbd"
		}]
	}, {
		"featureType": "poi",
		"elementType": "geometry",
		"stylers": [{
			"color": "#eeeeee"
		}]
	}, {
		"featureType": "poi",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#757575"
		}]
	}, {
		"featureType": "poi.attraction",
		"stylers": [{
			"visibility": "on"
		}]
	}, {
		"featureType": "poi.park",
		"elementType": "geometry",
		"stylers": [{
			"color": "#e5e5e5"
		}]
	}, {
		"featureType": "poi.park",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#9e9e9e"
		}]
	}, {
		"featureType": "road",
		"elementType": "geometry",
		"stylers": [{
			"color": "#ffffff"
		}]
	}, {
		"featureType": "road.arterial",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#757575"
		}]
	}, {
		"featureType": "road.highway",
		"elementType": "geometry",
		"stylers": [{
			"color": "#dadada"
		}]
	}, {
		"featureType": "road.highway",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#617171"
		}]
	}, {
		"featureType": "road.local",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#9e9e9e"
		}]
	}, {
		"featureType": "transit.line",
		"elementType": "geometry",
		"stylers": [{
			"color": "#e5e5e5"
		}]
	}, {
		"featureType": "transit.station",
		"elementType": "geometry",
		"stylers": [{
			"color": "#eeeeee"
		}]
	}, {
		"featureType": "water",
		"elementType": "geometry",
		"stylers": [{
			"color": "#c9c9c9"
		}]
	}, {
		"featureType": "water",
		"elementType": "labels.text.fill",
		"stylers": [{
			"color": "#9e9e9e"
		}]
	}];

	//オリジナルのアイコンを使用
	var icon = new google.maps.MarkerImage('アイコンの画像データへの相対パス',
		new google.maps.Size(30, 60), /*アイコンサイズ設定*/
		new google.maps.Point(0, 0) // origin
	);

	// tokyo
	var latlng1 = new google.maps.LatLng(35.6811673, 139.7648629);
	var mapOptionsTokyo = {
		zoom: 17,
		center: latlng1,
		mapTypeControl: false,
	  	fullscreenControl: false,
		styles: styleArray
	};
	var mapTokyo = new google.maps.Map(document.getElementById('map-tokyo'), mapOptionsTokyo);
	var marker1 = new google.maps.Marker({
		position: latlng1,
		map: mapTokyo,
		icon: icon,
		title: "東京"
	});

	// osaka
	var latlng2 = new google.maps.LatLng(34.7024898, 135.4937619);
	var mapOptionsOsaka = {
		zoom: 17,
		center: latlng2,
		mapTypeControl: false, //マップタイプ コントロール
	  	fullscreenControl: false, //全画面表示コントロール
		styles: styleArray
	};
	var mapOsaka = new google.maps.Map(document.getElementById('map-osaka'), mapOptionsOsaka);
	var marker2 = new google.maps.Marker({
		position: latlng2,
		map: mapOsaka,
		icon: icon,
		title: "大阪"
	});
}

google.maps.event.addDomListener(window, 'load', initialize);

出力する側のページはこのような記述。

<div class="map">
	<div id="map-tokyo"></div>
</div>

<div class="map">
	<div id="map-osaka"></div>
</div>

もっとスマートな方法があるよって場合はぜひレクチャーしていただけるとありがたいです。