Googleマップのカスタマイズ / 2013/04/07

HTML

JS

function initialize() {
	var latlng = new google.maps.LatLng(35.691775, 139.700389);
	var myOptions = {
		zoom: 14,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
	};
	var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
	var markerOptions = {
		position: latlng,
		map: map,
	};
	var marker = new google.maps.Marker(markerOptions);
	//var styleOptions = [{ "elementType": "geometry.fill", "stylers": [ { "saturation": -100 }, { "visibility": "on" }, { "color": "#ffffff" } ] },{ "elementType": "geometry.stroke", "stylers": [ { "weight": 0 }, { "visibility": "on" }, { "color": "#dcdcdc" } ] },{ "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" }, { "color": "#505050" } ] },{ "elementType": "labels.text.stroke", "stylers": [ { "visibility": "on" }, { "color": "#000000" }, { "weight": 0.1 } ] },{ "elementType": "labels.icon", "stylers": [  { "visibility": "on" }, { "saturation": -100 }, { "gamma": 8 } ] }];
	var styleOptions = [{ "elementType": "geometry.fill", "stylers": [ { "saturation": -100 }, { "visibility": "on" }, { "color": "#ffffff" } ] },{ "elementType": "geometry.stroke", "stylers": [ { "weight": 0 }, { "visibility": "on" }, { "color": "#eeeeee" } ] },{ "elementType": "labels.text.fill", "stylers": [ { "visibility": "on" }, { "color": "#000000" } ] },{ "elementType": "labels.text.stroke", "stylers": [ { "visibility": "on" }, { "color": "#000000" }, { "weight": 0.1 } ] },{ "elementType": "labels.icon", "stylers": [  { "visibility": "off" } ] }];
	var styledMapOptions = { name: 'maps' }
	var lipogramMap = new google.maps.StyledMapType(styleOptions, styledMapOptions);
	map.mapTypes.set('lm', lipogramMap);
	map.setMapTypeId('lm');
}
google.maps.event.addDomListener(window, 'load', initialize);