Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 869
Rene Terstegen Avatar asked Oct 26 '10 14:10

Rene Terstegen


People also ask

How do I hide roads on Google Maps?

Click the "Labels" option to turn off labels on the map. All streets, cities and geographic labels will be removed from the map.

How do I hide categories on Google Maps?

Thank you for getting back to us on this. To hide the Marker Category item, you will need to go to Maps->Settings->Marker Listing and then if you look in the options you will see the option to – Hide the Category column.

How do I hide icons on Google Maps?

Step 1 Go to Add or Edit Map and Scroll down to the 'Infowindow Settings' section. Step 2 Enable the box of 'Hide Markers on Page Load' option. Step 3 Click on Save Map and open it in browser.

How do I hide markers on Google Maps API?

Once you are able to detect the marker click event you need to "hide" or remove the marker from the map. The standard way for doing this with google maps is to do this: this. setMap(null);


1 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:

alt text

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

like image 156
Daniel Vassallo Avatar answered Oct 26 '22 02:10

Daniel Vassallo