google_map
// <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
var map;
var Kiyev = new google.maps.LatLng(50.450958, 30.476626);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var marker;
var featureOpts = [{
"featureType": "all",
"elementType": "all",
"stylers": [{
"hue": "#008eff"
}]
}, {
"featureType": "administrative",
"elementType": "labels",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "landscape.natural",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "poi",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "road",
"elementType": "all",
"stylers": [{
"saturation": "0"
}, {
"lightness": "0"
}, {
"visibility": "on"
}]
}, {
"featureType": "road.highway",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "road.highway",
"elementType": "labels",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "all",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit.station.rail",
"elementType": "all",
"stylers": [{
"visibility": "on"
}]
}, {
"featureType": "water",
"elementType": "all",
"stylers": [{
"visibility": "simplified"
}, {
"saturation": "-60"
}, {
"lightness": "-20"
}]
}];
var mapOptions = {
zoom: 15,
scaleControl: true,
center: Kiyev,
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: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
var image = 'images/map_icon.png';
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
icon: image,
position: Kiyev
});
google.maps.event.addListener(marker, 'click', toggleBounce);
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);