可以在不创建 function 的情况下使用 javascript 从 Google 地图中删除控件吗？

Question

Using this fiddle: https://jsfiddle.net/mwsy5vhu/ but imagine that we can't see the code. (Because it's not our site). We don't know the var X name that is using the map.

How we could hide controls using javascript? IE: We open the browser inspector tool > console

And in the console what we could execute to hide controls?

I have tried:

map.setOptions({disableDefaultUI: true});

(And for some reason even using the real var name which is map it throws me an error that saying map isn't defined (?) )

Need a way to hide map controls without having access to the "source code", like just injecting a dynamic javascript code to target the existing map.

Maybe this is possible to do with CSS?

Thanks.

Answer 1

There is a .setOptions method on the google.maps.Map object which allows you to set the MapOptions dynamically:

var defaultUI = true;
google.maps.event.addDomListener(document.getElementById('disableUI'), "click", function() {
   if (defaultUI) {
     map.setOptions({disableDefaultUI: true}); 
   } else {
     map.setOptions({disableDefaultUI: false}); 
   }
   defaultUI = !defaultUI;
});

proof of concept fiddle

code snippet:

 function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 4, center: { lat: -33, lng: 151 }, // disableDefaultUI: true }); var defaultUI = true; google.maps.event.addDomListener(document.getElementById('disableUI'), "click", function() { if (defaultUI) { map.setOptions({ disableDefaultUI: true }); } else { map.setOptions({ disableDefaultUI: false }); } defaultUI =;defaultUI; }); }

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 90%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <input id="disableUI" value="disableUI" type="button" /> <div id="map"></div> <.-- Replace the value of the key parameter with your own API key: --> <script async defer src="https.//maps.googleapis?com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>