Как стилизовать Google Map
 

Здравствуйте.
Пытаюсь стилизовать Google map в таком варианте mapstylr.com/style/facebook-3/ , но не получается.

Вот код моей Google Map:

<script type="text/javascript">
			function initialize() {
				var latlng = new google.maps.LatLng(57.0442, 9.9116);
				var settings = {
					zoom: 1,
					center: latlng,
					
					disableDefaultUI: true,
					 zoomControl: true,
					 scaleControl: false
					};
				var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
				var contentString = '<div id="content">'+
					'<div id="siteNotice">'+
					'</div>'+
					'<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
					'<div id="bodyContent">'+
					'<p>Lorem ipsum dolor</p>'+
					'</div>'+
					'</div>';
				var infowindow = new google.maps.InfoWindow({
					content: contentString
				});
				
				
				
		  
		  	var companyImage14 = new google.maps.MarkerImage('https://mysite.com/panel/include/img/monitoring-points-icon.png',
					new google.maps.Size(17,17),
					new google.maps.Point(0,0),
					new google.maps.Point(17,17)
				);


				var companyPos14 = new google.maps.LatLng(17.34234, 10.34234);

				var companyMarker14 = new google.maps.Marker({
					position: companyPos14,
					map: map,
					icon: companyImage14,
					shadow: 0,
					title:'Monitoring point: MP4',
					zIndex: 3});
		 
  
				
				google.maps.event.addListener(companyMarker, 'click', function() {
					infowindow.open(map,companyMarker);
				}); 
			}
		</script>

Подскажите, пожалуйста, как стилизовать мою стандартную карту под такой дизайн? Или же, как просто поменять цвет океанов и суши чтобы получилось нечто похожее на этот пример?

Jeick9, Здравствуйте.
По Вашей ссылке этот стиль описан внизу страницы (только почему-то там много лишнего в кавычки запихали:-? )

Ваш код у меня не работал, я его немного изменила

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
var myLatlng, map;

function initialize() {
	var styles = [
		{
			featureType: "water",
			elementType: "all",
			stylers: [{color: "#3b5998"}]
		},
		{
			featureType: "administrative.province",
			elementType: "all",
			stylers: [{visibility: "off"}]
		},
		{
			featureType: "all",
			elementType: "all",
			stylers: [
				{
					hue: "#3b5998"
				}, 
				{
					saturation: -22
				}
			]
		},
		{
			featureType: "landscape",
			elementType: "all",
			stylers: [
				{
					visibility: "on"
				},
				{
					color: "#f7f7f7"
				},
				{
					saturation: 10
				},
				{
					lightness: 76
				}
			]
		},
		{
			featureType: "landscape.natural",
			elementType: "all",
			stylers: [{color: "#f7f7f7"}]
		},
		{
			featureType: "road.highway",
			elementType: "all",
			stylers: [{color: "#8b9dc3"}]
		},
		{
			featureType: "administrative.country",
			elementType: "geometry.stroke",
			stylers: [
				{
					visibility: "simplified"
				},
				{
					color: "#3b5998"
				}
			]
		},
		{
			featureType: "road.highway",
			elementType: "all",
			stylers: [
				{
					visibility: "on"
				},
				{
					color: "#8b9dc3"
				}
			]
		},
		{
			featureType: "road.highway",
			elementType: "all",
			stylers: [
				{
					visibility: "simplified"
				},
				{
					color: "#8b9dc3"
				}
			]
		},
		{
			featureType: "transit.line",
			elementType: "all",
			stylers: [
				{
					invert_lightness: false
				},
				{
					color: "#ffffff"
				},
				{
					weight: 0.43
				}
			]
		},
		{
			featureType: "road.highway",
			elementType: "labels.icon",
			stylers: [{visibility: "off"}]
		},
		{
			featureType: "road.local",
			elementType: "geometry.fill",
			stylers: [{color: "#8b9dc3"}]
		},
		{
			featureType: "administrative",
			elementType: "labels.icon",
			stylers: [
				{
					visibility: "on"
				},
				{
					color: "#3b5998"
				}
			]
		}
	]	

   var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

	myLatlng = new google.maps.LatLng(57.0442, 9.9116);
    var settings = {
        center: myLatlng,
        zoom: 13,
		disableDefaultUI: true,
        zoomControl: true,
        scaleControl: false,
        mapTypeControlOptions: {
			mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
		}

    };
	
    map = new google.maps.Map(document.getElementById("map_canvas"), settings);
	map.mapTypes.set('map_style', styledMap);
	map.setMapTypeId('map_style');
    return (false);
}

var companyImage14 = new google.maps.MarkerImage('https://mysite.com/panel/include/img/monitoring-points-icon.png',
        new google.maps.Size(17,17),
        new google.maps.Point(0,0),
        new google.maps.Point(17,17)
    );

var marker = new google.maps.Marker({
	position: myLatlng,
	map: map,
	icon: companyImage14,
	shadow: 0,
	title:'Monitoring point: MP4',
	zIndex: 3
});	

var contentString = '<div id="content">'+
		'<div id="siteNotice">'+
		'</div>'+
        '<h1 id="firstHeading" class="firstHeading">Hogenhaug</h1>'+
        '<div id="bodyContent">'+
        '<p>Lorem ipsum dolor</p>'+
        '</div>'+
        '</div>';
var infowindow = new google.maps.InfoWindow({
	content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
});

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width:100%; height:100%"></div>