yuheijotaki.com

Googleマップのカスタマイズ その2

ここからもう少しいじれるように、というかスタイルに関してはだいぶわかってきた気がする
Googleのドキュメント見ればだいたいどこまでできるのか分かるような気がする

 

以下JS部分

//テクスチャのオーバーレイ追加
function TextureMapType(tileSize) {
	this.tileSize = tileSize;
}
TextureMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
	var div = ownerDocument.createElement('div');
	div.style.width = this.tileSize.width + 'px';
	div.style.height = this.tileSize.height + 'px';
	div.style.background = 'url(./image/noise.png)'; //便宜差し替え
	div.style.backgroundSize = '100px 100px'; //便宜差し替え
	return div;
};

//情報ウィンドウ 1個ずつ表示
var currentWindow = null;


function initialize() {
var myOptions = {
zoom: 5, //デフォルト拡縮
center: new google.maps.LatLng(37.000000, 139.000000), //デフォルト中央位置
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true, //デフォルトUI無効
scrollwheel: false, //スクロール拡縮無効
draggable: false //ドラッグ移動無効
};
var map = new google.maps.Map(document.getElementById(‘homeMap’), myOptions);
map.overlayMapTypes.insertAt(0, new TextureMapType(new google.maps.Size(100, 100))); //テクスチャのオーバーレイ追加
var markers = [ //マーカー配列で
[‘<p><a href=”./osaka/“>大阪府</a></p>‘,34.686552, 135.520642],
[‘<p><a href=”./shizuoka/“>静岡県</a></p>‘,34.977082, 138.383024]
];
for (var i = 0; i < markers.length; i++) {
var name = markers[i][0];
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
var icons = ’./image/maker.png’; //マーカー画像のパス
createMarker(name,latlng,icons,map);
}


//リサイズ対応
google.maps.event.addDomListener(window, "resize", function() {
	var center = map.getCenter();
	google.maps.event.trigger(map, "resize");
	map.setCenter(center);
});


}


function createMarker(name,latlng,icons,map){
var infoWindow = new google.maps.InfoWindow();
var markerOptions = {
position: latlng,
map: map
};
var marker = new google.maps.Marker({position: latlng,icon:icons,map: map});


//情報ウィンドウ
google.maps.event.addListener(marker, 'click', function() {
	if (currentWindow) {
		currentWindow.close();
	}
	infoWindow.setContent(name);
	infoWindow.open(map,marker);
	currentWindow = infoWindow;
});

//スタイル設定
var styleOptions = [
		{"elementType":"labels.text","stylers":[{"visibility":"off"}]},
		{"featureType":"water","stylers":[{"color":"#f4f9f6"}]},
		{"featureType":"road","stylers":[{"visibility":"off"}]},
		{"featureType":"poi","stylers":[{"visibility":"off"}]},
		{"featureType":"administrative.locality","stylers":[{"visibility":"off"}]},
		{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},
		{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},
		{"featureType":"landscape","stylers":[{"visibility":"off"}]},
		{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#009241"}]},
		{"featureType":"transit","stylers":[{"visibility":"off"}]}
	];
var styledMapOptions = { name: 'maps' }
var customMaps = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('cm', customMaps);
map.setMapTypeId('cm');


}


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

 

参考