How can I alter "FeatureType" of a Google Map

Wappler General Need Help
3

A simple example of how to extend the maps options.

On your page you have a map with an id of maps1:

<dmx-google-maps id="maps1" height="800" address="amsterdam" zoom="15"></dmx-google-maps>

At the bottom of your page add the following:

<script>
        function init() {
            var map = document.getElementById("maps1").dmxComponent.map;
            var mapStyles = [ 
            { 
                "featureType": "administrative", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "road", 
                "elementType": "labels", 
                "stylers": [ { "visibility": "on" } ] 
            },
            { 
                "featureType": "road", 
                "elementType": "geometry.stroke", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "road", 
                "elementType": "geometry.fill", 
                "stylers": [ 
                    { "visibility": "on" }, 
                    { "color": "#ffffff" }
                ] 
            },
            { 
                "featureType": "transit", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "poi.attraction", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "poi.business", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "poi.government", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "poi.medical", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "poi.park", 
                "elementType": "labels", 
                "stylers": [ { "visibility": "off" } ]                  
            },
            { 
                "featureType": "poi.place_of_worship", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "poi.school", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "poi.sports_complex", 
                "stylers": [ { "visibility": "off" } ] 
            },
            { 
                "featureType": "landscape.man_made", 
                "stylers": [ 
                    { "visibility": "on" }, 
                    { "color": "#fce8f0" } 
                ] 
            },
            { 
                "featureType": "landscape.natural", 
                "elementType": "labels", 
                "stylers": [ { "visibility": "on" } ] 
            },
            { 
                "featureType": "landscape.natural", 
                "elementType": "geometry", 
                "stylers": [ 
                    { "color": "#fce8f0" }, 
                    { "visibility": "on" } 
                ] 
            },
            { 
                "featureType": "water", 
                "elementType": "labels", 
                "stylers": [ { "visibility": "on" } ] },
            { } 
        ];  
            var opt = { 
                // add here your options which you want to override following the maps docs
                styles: mapStyles
        };
        map.setOptions(opt); 
        }
</script>

finally add onready="init()" to your map code:

<dmx-google-maps id="maps1" height="800" address="amsterdam" zoom="15" onready="init()"></dmx-google-maps>

and you’re done.

1 Like