CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
NateFriedman
NateFriedman

Reputation: 530

How do I remove building interiors from Google maps using styles?

I am trying to simplify google map layout by using custom styles. One issue I cannot get around is that building interiors are being displayed. For example, the Time Warner Building in NYC:

Time Warner Building, Columbus Circle, New York, NY

Here is the code that will generate a simplified map of the example:

 <!DOCTYPE html>
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
     <style>
       html, body, #map_canvas {
         margin: 0;
         padding: 0;
         height: 100%;
       }
     </style>
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
     <script>
       var map;
       function initialize() {
         var mapOptions = {
           zoom: 18,
           center: new google.maps.LatLng(40.7681, -73.9819),
      mapTypeId: google.maps.MapTypeId.ROADMAP
         };


         map = new google.maps.Map(document.getElementById('map_canvas'),
             mapOptions);

 var styles = [
   {
     "featureType": "poi",
     "stylers": [
       { "visibility": "off" }
     ]
   },{
     "featureType": "landscape",
     "stylers": [
       { "visibility": "off" }
     ]
   },{
     "featureType": "transit",
     "stylers": [
       { "visibility": "off" }
     ]
   }
 ]
 ;

 map.setOptions({styles: styles});

       }

       google.maps.event.addDomListener(window, 'load', initialize);
     </script>
   </head>
   <body>
     <div id="map_canvas"></div>
   </body>
 </html>

If I turn the visibility of "all" features, the building interior does go away along with everything else. However, I have been unable to figure out how to just make the interior disappear.

Any help greatly appreciated!

Upvotes: 0

Views: 1554

Answers (1)

NateFriedman
NateFriedman

Reputation: 530

Figured out the answer. You turn off all POI and then turn on only what you want to display. Here is the styler to make the building interiors (and everything else) to not appear:

var styles = [
  {"stylers": [
          { "visibility": "off" },

        ]},
{
    "featureType": "road",
    "stylers": [
      { "visibility": "on" }
    ]
  }];

Upvotes: 3

Related Questions