Google Maps v3 hide elements (roads, roadsigns, etc)

I found a code snippet on http://www.41latitude.com/post/1268734799/google-styled-maps:

[
  {
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

I should be able to use it in my maps, but is there somebody who can tell me how I can use this snippet? I can't find anything about it in the API of Google Maps V3.

Answers


As @ceejayoz suggested in the other answer, you are trying to use the new Styled Map features of the v3 Maps API. Here's a very basic example of how you could use the above style in a simple map:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Dark Water Style Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 550px; height: 300px;"></div> 

   <script type="text/javascript"> 
     var myStyle = [
       {
         featureType: "administrative",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "poi",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "water",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "road",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       }
     ];

     var map = new google.maps.Map(document.getElementById('map'), {
       mapTypeControlOptions: {
         mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
       },
       center: new google.maps.LatLng(30, 0),
       zoom: 3,
       mapTypeId: 'mystyle'
     });

     map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
   </script> 
</body> 
</html>

Screenshot:

You may also want to check out the Google Maps APIs Styling Wizard which will allow you to graphically edit styles.


I know this is 5 years old, but I stumbled across this and the accepted solution is much more complex than needed in my opinion. Given the JSON in the original post, this is how you would apply the style to an existing map:

var mapStyle = [
  {
    featureType: "administrative",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "poi",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "water",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

//create map
var map = new google.maps.Map(...); //This assumes you already have a working map

//set style
map.set('styles', mapStyle);

The page you linked to includes a link to the Google Maps API documentation for this feature.


Need Your Help

How to change a text with jQuery

jquery

I have an h1 with id of toptitle that is dynamically created, and I am not able to change the HTML.

Passing JSONObject into another activity

android android-activity parcelable

I'm hitting an external API that's returning JSON data (new dvd titles). I'm able to parse out the JSON and list each dvd title and other dvd information into a ListView just fine. I was also abl...