CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Nick
Nick

Reputation: 382

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

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

Upvotes: 5

Views: 4503

Answers (2)

Dr. András Timár
Dr. András Timár

Reputation: 3

Based on @Mano's answer, you can just include the styles options right in the mapOptions:

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

Upvotes: 0

Mano Marks
Mano Marks

Reputation: 8819

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

Upvotes: 6

Related Questions