ansaurus

Question

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

Answer 1

+1 A:

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

ceejayoz 2010-10-26 14:29:26

Ok, missed the link. Like my Girlfriend says: I'm a good searcher, but a bad finder!

Stegeman 2010-10-27 07:42:59

Answer 2

A:

I really don't see much on the page, it looks like they are using the different basemaps road, satelite, etc. They do manipulate the styling options as already detailed.

Drew 2010-10-26 14:30:44

Answer 3

+1 A:

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 API Styled Map Wizard which will allow you to graphically edit styles.

Daniel Vassallo 2010-10-26 14:33:08

Great, this example was a good example and gave me the solution.

Stegeman 2010-10-27 07:06:10

ansaurus

tags:

views:

answers:

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

related questions