Google maps - usando lo stile personalizzato di json * e * TERRAIN

Question

Quindi ho creato un JSON personalizzato per rendere gli oceani un blu più saturo, ma ora non riesco a ottenere la mappa come predefinita alla vista TERRAIN, va solo alla visualizzazione ROADMAP standard, non riesco a capire perché questo sta accadendo, qualche idea?

function initialize() { 

    // Create an array of styles. 
    var blueOceanStyles = [ 
    { 
     featureType: "water", 
     stylers: [ 
     { hue: "#4b83d4" }, 
     { saturation: 53 } 
     ] 
    } 
    ]; 

    // Create a new StyledMapType object, passing it the array of styles, 
    // as well as the name to be displayed on the map type control. 
    var blueOceanType = new google.maps.StyledMapType(blueOceanStyles, 
    {name: "Blue Oceans"}); 

    // Create a map object, and include the MapTypeId to add 
    // to the map type control. 
    var mapOptions = { 
    zoom: 5, 
    center: new google.maps.LatLng(50, 0), 
    disableDefaultUI: true, 
    mapTypeId: google.maps.MapTypeId.TERRAIN, 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.TERRAIN, 'blue_oceans'] 
    } 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 

    //Associate the styled map with the MapTypeId and set it to display. 
    map.mapTypes.set('blue_oceans', blueOceanType); 
    map.setMapTypeId('blue_oceans'); 
} 

Answer 1

tua ultima riga:

Questo fa sì che il tipo di mappa da ripristinare per il tipo di mappa per il vostro tipo di blue_oceans mappa. Stai cercando di creare i due diversi tipi di mappe? O vuoi solo un tipo di terreno con il tuo stile? In quest'ultimo caso, provate questo invece:

 function initialize() { 

    // Create an array of styles. 
    var blueOceanStyles = [ 
    { 
     featureType: "water", 
     stylers: [ 
     { hue: "#4b83d4" }, 
     { saturation: 53 } 
     ] 
    } 
    ]; 

    // Create a map object, and include the MapTypeId to add 
    // to the map type control. 
    var mapOptions = { 
    zoom: 5, 
    center: new google.maps.LatLng(50, 0), 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 

    //Associate the styled map with the MapTypeId and set it to display. 
    map.setOptions({styles: blueOceanStyles}); 
} 

Answer 2

Sulla base @ risposta di Mano, si può semplicemente includere le opzioni di stili proprio nel mapOptions:

var mapOptions = { 
zoom: 5, 
center: new google.maps.LatLng(50, 0), 
mapTypeId: google.maps.MapTypeId.TERRAIN, 
styles: blueOceanStyles 
};