Google maps - using custom json styling *and* TERRAIN view

Question

So I've created some custom JSON to make the oceans a more saturated blue but now can't seem to get the map to default to TERRAIN view, it just goes to the standard ROADMAP view, can't seem to work out why this is happening, any 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 causes the map type to be reset to your map type to your blue_oceans map type. Are you trying to create the two different map types? Or do you want only a terrain type 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});
}