最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Remove the buttons in a google map - Stack Overflow

programmeradmin3浏览0评论

I would like to ask if your able to remove the other buttons in a google map.Is it possible? How to remove the buttons like the view full screen button, the Google button, the other buttons. Please see attach image for reference. I wanted to remove the buttons that are encircled. This is my code.

  <body>
    <div id="map"></div>
    <script>
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(12.8797, 121.7740),
          zoom: 7
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('phpsqlajax_genxml.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var image = markerElem.getAttribute('image');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: 'images.png',
                label: icon.label
              });
              marker.addListener('mouseover', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src=";callback=initMap">
    </script>
  </body>

I would like to ask if your able to remove the other buttons in a google map.Is it possible? How to remove the buttons like the view full screen button, the Google button, the other buttons. Please see attach image for reference. I wanted to remove the buttons that are encircled. This is my code.

  <body>
    <div id="map"></div>
    <script>
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(12.8797, 121.7740),
          zoom: 7
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('phpsqlajax_genxml.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var image = markerElem.getAttribute('image');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));
              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: 'images.png',
                label: icon.label
              });
              marker.addListener('mouseover', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }

      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis./maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
Share Improve this question edited Sep 3, 2020 at 1:51 Israel Oluwole 687 bronze badges asked Apr 10, 2018 at 1:05 gwapogwapo 2182 gold badges5 silver badges30 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

You can set the controls individually like this.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(12.8797, 121.7740),
        zoom: 7,
        scaleControl: false,
        streetViewControl: false,
        fullscreenControl: false
    });
}

in the funtion initMap() add disableDefaultUI: true

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(12.8797, 121.7740),
    zoom: 7,
    disableDefaultUI: true
});

more info in Disabling the default UI

Doesn't remove the google button on the bottom though.

You can set the disableDefaultUI: true as suggested by Fenrir, however removing of logo is prohibited as per Terms of Service

No removing, obscuring, or altering terms of service, links, or proprietary rights notices. You will not: remove, obscure, or alter any Google terms of service or any links to or notices of those terms, or any copyright, trademark, or other proprietary rights notices; or falsify or delete any author attributions, legal notices, or other labels of the origin or source of material.

发布评论

评论列表(0)

  1. 暂无评论