Google Maps - using json * and * TERRAIN custom style

Question

So, I created some kind of custom JSON to make the oceans more saturated with blue, but now it seems it can’t get the default map for TERRAIN, it just goes into the standard ROADMAP view, it doesn't seem to work why this happens, some ideas?

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

Your last line:

  map.setMapTypeId('blue_oceans');

This leads to a reset card type to your card type to a blue_oceans card type. Are you trying to create two different types of cards? Or do you want only the type of terrain with your style? If the latter, try this instead:

      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

@Mano mapOptions:

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