Карты Google - с использованием пользовательских стилей json * и * TERRAIN view

Question

Итак, я создал несколько пользовательских JSON, чтобы сделать океаны более насыщенным синим, но теперь не получается, что карта по умолчанию отображается в виде TERRAIN, она просто переходит в стандартное представление ROADMAP, не может работать почему это происходит, есть идеи?

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

Ваша последняя строка:

  map.setMapTypeId('blue_oceans');

Это приводит к тому, что тип карты будет сброшен с вашего типа карты до вашего типа карты blue_oceans. Вы пытаетесь создать два разных типа карт? Или вам нужен только тип местности с вашим стилем? Если последнее, попробуйте это вместо:

      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
};