Как убрать верхний левый угол кнопки карты?

Question

По умолчанию в верхнем левом углу карты находятся две кнопки план и спутник :

Вот код:

<script>
  map = null;
  poly = null;
function initMap() {
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var directionsService = new google.maps.DirectionsService;
  map = new google.maps.Map(document.getElementById('map'), {
                                                              zoom: 7,
                                                              center: {lat: -18.92379, lng: 47.542537},
                                                              mapTypeId: google.maps.MapTypeId.ROADMAP
                                                            }
                               );
  directionsDisplay.setMap(map);
  poly = new google.maps.Polyline({
                                  strokeColor: '#000000',
                                  strokeOpacity: 1.0,
                                  strokeWeight: 3
                                });
  poly.setMap(map);
  document.getElementById('organisation').addEventListener('change', function() {
    getFlotteByOrganisation(document.getElementById('organisation').value);
  });
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSJrLcMUVltUHcVjtC8ZotBshfiue8J68&callback=initMap"></script>

Как убрать эти две кнопки?

Answer 1

Один из вариантов - отключить пользовательский интерфейс по умолчанию:

disableDefaultUI: true

Добавьте обратно в элемент управления просмотром улиц и масштабирования (если вы хотите их):

streetViewControl: true, // add back streetView control
zoomControl: true, // add back the zoom control

фрагмент кода:

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<div id="map"></div>
<script>
  map = null;
  poly = null;

  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {
        lat: -18.92379,
        lng: 47.542537
      },
      disableDefaultUI: true, // disable the default controls
      streetViewControl: true, // add back streetView control
      zoomControl: true, // add back the zoom control
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    directionsDisplay.setMap(map);
    poly = new google.maps.Polyline({
      strokeColor: '#000000',
      strokeOpacity: 1.0,
      strokeWeight: 3
    });
    poly.setMap(map);
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSJrLcMUVltUHcVjtC8ZotBshfiue8J68&callback=initMap"></script>