如何更改地圖樣式

Question

如何添加API JSON風格谷歌

[{"stylers": [{ "hue": "#005eff" },{ "gamma": 0.64 }]}]

映射到我的地圖腳本：

<script> 
function initialise() { 
    var myLatlng = new google.maps.LatLng(43.607956, 21.0122); // Add the coordinates 
    var mapOptions = { 
     zoom: 13, // The initial zoom level when your map loads (0-20) 
     minZoom: 6, // Minimum zoom level allowed (0-20) 
     maxZoom: 17, // Maximum soom level allowed (0-20) 
     zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls. 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons. 
     }, 
     center: myLatlng, // Centre the Map to our coordinates variable 
     mapTypeId: google.maps.MapTypeId.ROADMAP, // Ostali izglediMapTypeId.TERRAIN, MapTypeId.HYBRID, MapTypeId.SATELLITE, 
     scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!) 
     // All of the below are set to true by default, so simply remove if set to true: 
     panControl: true, // Set to false to disable 
     mapTypeControl: true, // Disable Map/Satellite switch 
     scaleControl: true, // Set to false to hide scale 
     streetViewControl: true, // Set to disable to hide street view 
     overviewMapControl: true, // Set to false to remove overview control 
     rotateControl: true // Set to false to disable rotate control 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div 

    var image = new google.maps.MarkerImage("http://web-sajtovi.eu5.org/images/marker.png", null, null, null, new google.maps.Size(40, 52)); // Create a variable for our marker image. 

    var marker = new google.maps.Marker({ // Set the marker 
     position: myLatlng, // Position marker to coordinates 
     icon: image, //use our image as the marker 
     map: map, // assign the market to our map variable 
     title: 'Klikni za informacije o izradi web sajtova' // Marker ALT Text 
    }); 

    // google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker 
    //  window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to Link Marker to (i.e Google Places Listing) 
    // }); 

    var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow 
     content: "<h3>Web Dizajn kreativni tim</h3><p>Izrada web sajtova, Braće spasojevicć 42, trstenik, Serbia, tel +38163659766.</p>" // HTML contents of the InfoWindow 
    }); 

    google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker 
     infowindow.open(map, marker); // Open our InfoWindow 
    }); 

    google.maps.event.addDomListener(window, 'resize', function() { 
     map.setCenter(myLatlng); 
    }); // Keeps the Pin Central when resizing the browser on responsive sites 
} 
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded. 
</script> 

Answer 1

您可以使用下面的代碼地圖樣式：

map.set('styles', [{ 
    featureType: 'road', 
    elementType: 'geometry', 
    stylers: [{ 
     color: '#000000' 
    }, { 
     weight: 1.6 
    }] 
}, { 
    featureType: 'road', 
    elementType: 'labels', 
    stylers: [{ 
     saturation: -100 
    }, { 
     invert_lightness: true 
    }] 
}, { 
    featureType: 'landscape', 
    elementType: 'geometry', 
    stylers: [{ 
     hue: '#ffff00' 
    }, { 
     gamma: 1.4 
    }, { 
     saturation: 82 
    }, { 
     lightness: 96 
    }] 
}, { 
    featureType: 'poi.school', 
    elementType: 'geometry', 
    stylers: [{ 
     hue: '#fff700' 
    }, { 
     lightness: -15 
    }, { 
     saturation: 99 
    }] 
}]); 

參考：https://developers.google.com/maps/tutorials/customizing/styling-the-base-map

演示：http://jsfiddle.net/lotusgodkk/x8dSP/3524/

Answer 2

當最初要設置的樣式簡單地通過-property mapOptions的styles設置：

var mapOptions = { 
    zoom: 13, // The initial zoom level when your map loads (0-20) 
    minZoom: 6, // Minimum zoom level allowed (0-20) 
    maxZoom: 17, // Maximum soom level allowed (0-20) 
    zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls. 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons. 
    }, 
    center: myLatlng, // Centre the Map to our coordinates variable 
    mapTypeId: google.maps.MapTypeId.ROADMAP, // Ostali izglediMapTypeId.TERRAIN, MapTypeId.HYBRID, MapTypeId.SATELLITE, 
    scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!) 
    // All of the below are set to true by default, so simply remove if set to true: 
    panControl: true, // Set to false to disable 
    mapTypeControl: true, // Disable Map/Satellite switch 
    scaleControl: true, // Set to false to hide scale 
    streetViewControl: true, // Set to disable to hide street view 
    overviewMapControl: true, // Set to false to remove overview control 
    rotateControl: true, // Set to false to disable rotate control 
    //apply the styles 
    styles:[{"stylers": [{ "hue": "#005eff" },{ "gamma": 0.64 }]}] 
}