Remove indoor maps from styled Google Maps

问题

I'm trying to make a styled google map with just the Boston subway lines, land, and water. I set the visibility of everything to off, but some buildings are still showing up, and it looks like its only buildings with indoor maps.

Here is my code:

<html>

<head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

    var lat = 42.3581;
    var long = -71.0636;
    google.maps.visualRefresh = true;

    function initialize()
    {
        var mapStyle =
        [
            {
                featureType: 'administrative',
                elementType: 'all',
                stylers:
                [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'landscape',
                elementType: 'all',
                stylers:
                [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'poi',
                elementType: 'all',
                stylers:
                [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'road',
                elementType: 'all',
                stylers:
                [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'transit',
                elementType: 'all',
                stylers:
                [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'water',
                elementType: 'all',
                stylers:
                [
                    { visibility: 'off' }
                ]
            },
            {
                featureType: 'landscape',
                elementType: 'geometry',
                stylers:
                [
                    { color: '#ffffff' },
                    { visibility: 'on' }
                ]
            },
            {
                featureType: 'water',
                elementType: 'geometry',
                stylers:
                [
                    { color: '#e5e5e5' },
                    { visibility: 'on' }
                ]
            }
        ];

        var mapOptions =
        {
            center: new google.maps.LatLng(lat, long),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 16,
            backgroundColor: '#ffffff',
            streetViewControl: false,
            mapTypeControl: false,
            panControl: false,
            zoomControl: false,
            scrollwheel: true,
            draggable: true
        };

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var transitLayer = new google.maps.TransitLayer();
        transitLayer.setMap(map);
        var styledMapOptions = {name: 'Map'};
        var newMapType = new google.maps.StyledMapType(mapStyle, styledMapOptions);
        map.mapTypes.set('stylized', newMapType);
        map.setMapTypeId('stylized');

        onResize();
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    function onResize()
    {
        document.getElementById("map-canvas").style.height = window.innerHeight - document.getElementById("map-canvas").getBoundingClientRect().top + 24 +"px";
    }

    </script>

</head>

<body onResize="onResize()">
    <div id="map-canvas"/>
</body>

</html>

I also tried this, which worked but it turned my transit layer off too, and I need the transit layer for the colored subway lines:

featureType: 'all',
elementType: 'all',
stylers:
[
    { visibility: 'off' }
]

回答1:

The only way I found to achive this, is to disable everything and then putting each major style section back to visible afterwards in the styles json.

You can use the following as a reset styles json to remove indoor maps

[
  {"stylers": [ {"visibility": "off" } ] },
  {"featureType": "water","stylers": [{"visibility": "on"} ] },
  {"featureType": "poi","stylers": [ {"visibility": "on"} ]},
  {"featureType": "transit","stylers": [{ "visibility": "on"}] },
  { "featureType": "landscape","stylers": [ { "visibility": "on" } ] },
  { "featureType": "road", "stylers": [{ "visibility": "on" } ] },
  { "featureType": "administrative",  "stylers": [{ "visibility": "on" } ] },
  /* followed by your style if you have specific styles
    , otherwise remove the last comma */

]

回答2:

The following worked for me:

{
    featureType: 'indoor',
    stylers:
    [
        { visibility: 'off' }
    ]
}

回答3:

As of this response, there is no way to disable indoor maps. It is yet to be added to the style API.

However, as mentioned above, disabling all geometry will remove indoor maps as well.

回答4:

I was having the same issue where if I zoomed in to much, the interiors of buildings started to show that was conflicting with the styles I had set. I was able to solve this and get rid of the interiors by using Google's Style Map Wizard and started by adding a layer with everything turned off. Then layer by layer adding what I needed (road geometry, landscape, etc.).

来源：https://stackoverflow.com/questions/21416261/remove-indoor-maps-from-styled-google-maps

标签

google-maps

google-maps-api-3