Not Able to Turn Off Hiking Trails Layer in Google Maps

Question

I am trying to turn off Google Maps Hiking Trails is a Custom style map but it is still showing in the map.

As you can see I almost turned off all the layers but the hiking layer still there!

Can you please let me know how to remove it?

[
  {
    "featureType": "administrative",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

demo (jsfiddle from comments)

code snippet:

 var map; $(document).ready(function() { var latlng = new google.maps.LatLng(49.395505, -123.203317); var myOptions = { zoom: 14, center: latlng, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map.set('styles', [{ "featureType": "administrative", "stylers": [{ "visibility": "off" }] }, { "featureType": "landscape", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "stylers": [{ "visibility": "off" }] }, { "featureType": "road", "stylers": [{ "visibility": "off" }] }, { "featureType": "transit", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "stylers": [{ "visibility": "off" }] }]); }); 

 @import url('http://getbootstrap.com/dist/css/bootstrap.css'); body { padding-top: 25px; } #map_canvas { width: 100%; height: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <script src="http://maps.google.com/maps/api/js"></script> <div class="container"> <div class="well"> <div id="map_canvas"></div> </div> </div> 

Answer 1

To remove them, use this suggested work around:

[
  {
    "stylers": [
      { "visibility": "off" }
    ]
  },{
    "featureType": "landscape",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "administrative",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "poi",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "road",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "transit",
    "stylers": [
      { "visibility": "on" }
    ]
  },{
    "featureType": "water",
    "stylers": [
      { "visibility": "on" }
    ]
  }
]

(from the related issue in the issue tracker: Feature request: Add Feature Type for Ski Runs )

proof of concept fiddle

code snippet:

 var map; $(document).ready(function() { var latlng = new google.maps.LatLng(49.395505, -123.203317); var myOptions = { zoom: 14, center: latlng, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map.set('styles', [ { "stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape", "stylers": [ { "visibility": "on" } ] },{ "featureType": "administrative", "stylers": [ { "visibility": "on" } ] },{ "featureType": "poi", "stylers": [ { "visibility": "on" } ] },{ "featureType": "road", "stylers": [ { "visibility": "on" } ] },{ "featureType": "transit", "stylers": [ { "visibility": "on" } ] },{ "featureType": "water", "stylers": [ { "visibility": "on" } ] } ]); }); 

 @import url('http://getbootstrap.com/dist/css/bootstrap.css'); body { padding-top: 25px; } html, body, .container, .well, #map_canvas { width: 100%; height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script> <div class="container"> <div class="well"> <div id="map_canvas"></div> </div> </div>