<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 пример: Styled MapTypes</title>
<link rel="nofollow" href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var map;
var nnovgorod = new google.maps.LatLng(56.316537, 43.998779);
var MY_MAPTYPE_ID = 'mystyle';
function initialize() {
var stylez = [
{
"featureType": "landscape",
"stylers": [
{
"saturation": -100
},
{
"lightness": 65
},
{
"visibility": "on"
}
]
},
{
"featureType": "poi",
"stylers": [
{
"saturation": -100
},
{
"lightness": 51
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.highway",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"stylers": [
{
"saturation": -100
},
{
"lightness": 30
},
{
"visibility": "on"
}
]
},
{
"featureType": "road.local",
"stylers": [
{
"saturation": -100
},
{
"lightness": 40
},
{
"visibility": "on"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"saturation": -100
},
{
"visibility": "simplified"
}
]
},
{
"featureType": "administrative.province",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"lightness": -25
},
{
"saturation": -100
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"hue": "#ffff00"
},
{
"lightness": -25
},
{
"saturation": -97
}
]
}
];
var mapOptions = {
zoom: 12,
center: nnovgorod,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var styledMapOptions = {
name: "Мой стиль"
};
var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(59.32522, 18.07002),
icon: 'colored.png'
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px;"></div>
</body>
</html>
