Mapy Google - przy użyciu niestandardowego stylu json * i * widoku TERRAIN

Question

Stworzyłem więc niestandardowy JSON, aby oceany były bardziej nasycone na niebiesko, ale teraz nie można uzyskać domyślnej mapy widoku TERENU, to po prostu idzie do standardowego widoku ROADMAP, nie może wydawać się, dlaczego tak się dzieje, jakieś pomysły?

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

Twoja ostatnia linia:

Powoduje to typ mapy należy przywrócić do rodzaju mapy do Twojego typu blue_oceans mapy. Czy próbujesz utworzyć dwa różne typy map? A może chcesz tylko typ terenu ze swoim stylem? Jeśli to drugie, spróbuj zamiast tego:

 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

podstawie @ odpowiedź Mano, można po prostu zawierać opcje stylów w samym mapOptions:

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