Удалить кнопку из Google Maps API Javascript

Question

Я хочу добиться такого поведения: я открываю карту, и когда я ее перетаскиваю, появляется кнопка «Поиск в этой области».После того, как я нажму кнопку, я хочу, чтобы она исчезла, чтобы пользователь больше не мог искать в той же области.После того, как я перетащу карту, кнопка снова появится.

Это код:

  controlMarkerUI = document.createElement('div')
  controlText = document.createElement('div')

  mapReady(map) {
    this.my_map = map
    var self = this
    google.maps.event.addListener(this.my_map, 'dragend', function () {
      self.redo_search_button(self.my_map)
    });
  }

  redo_search_button(map) {    
    this.controlMarkerUI.style.cursor = 'pointer'
    this.controlMarkerUI.style.backgroundColor = '#fff';
    this.controlMarkerUI.style.marginTop = '10px'
    this.controlMarkerUI.style.border = '2px solid #fff'
    this.controlMarkerUI.style.borderRadius = '3px'
    this.controlMarkerUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)'
    this.controlMarkerUI.style.textAlign = 'center'
    this.controlMarkerUI.title = 'Click to redo search in this area'

    this.controlText.style.color = 'rgb(25,25,25)';
    this.controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
    this.controlText.style.fontSize = '16px';
    this.controlText.style.lineHeight = '38px';
    this.controlText.style.paddingLeft = '5px';
    this.controlText.style.paddingRight = '5px';
    this.controlText.innerHTML = 'Search in this area';

    this.controlMarkerUI.appendChild(this.controlText);
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(this.controlMarkerUI)

    var this_ = this
    this.controlMarkerUI.addEventListener('click', function () {
      this_.redo_search() // refresh the markers
      this_.removeDummy()
    });
  }

Я попытался вызвать функцию

  removeDummy() {
    this.controlMarkerUI.parentNode.removeChild(this.controlMarkerUI);
    return false;
  }

, это сделаеткнопка исчезнет, ​​но также будет перемещать кнопку вправо при каждом перетаскивании карты.

Answer 1

1. Установите отображение стиля кнопки на none при создании.

this.controlMarkerUI.style.display = 'none'

Зарегистрируйте прослушиватель событий на своей кнопке, чтобы скрыть его при нажатии. Зарегистрируйте прослушиватель событий на своей карте, чтобы показать его по окончании перетаскивания.

Полный рабочий пример ниже:

var map;

function initialize() {

  var mapOptions = {
    center: new google.maps.LatLng(10, 10),
    zoom: 5
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  // Set CSS for the control button
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#444';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.borderColor = 'white';
  controlUI.style.height = '28px';
  controlUI.style.marginTop = '5px';
  controlUI.style.marginLeft = '5px';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.style.display = 'none';


  // Set CSS for the control text
  var controlText = document.createElement('div');
  controlText.style.fontFamily = 'Arial,sans-serif';
  controlText.style.fontSize = '10px';
  controlText.style.color = 'white';
  controlText.style.paddingLeft = '10px';
  controlText.style.paddingRight = '10px';
  controlText.style.marginTop = '8px';
  controlText.innerHTML = 'My button text';
  controlUI.appendChild(controlText);

  // Setup the click event listeners to hide the button
  google.maps.event.addDomListener(controlUI, 'click', function() {

    this.style.display = 'none';
  });

  // Push button to map controls
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlUI);

  // Setup event listener to show the button on drag end
  google.maps.event.addListener(map, 'dragend', function() {
    controlUI.style.display = 'block'
  });
}

#map-canvas {
  height: 160px;
}

<div id="map-canvas"></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=initialize">
</script>