Как удалить пустой div, созданный в информационном окне Google Maps (закрыть информационное окно на карте, нажмите также закрыть старое информационное окно при открытии нового)

Question

По какой-то причине Google отображает пустой div в карточке Google Maps infoWindow. Я следую обычной практике, при которой я запускаю Карты Google с помощью initMap () и добавляю информационное окно, которое я использую:

if (props.content) {

  var infoWindow = new google.maps.InfoWindow({
    content: props.content
  });

  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
}

Как мне удалить этот div? или разместить мой контент в div?

Answer 1

Для удаления div в javascript вы можете просто использовать функцию remove() через точечную запись.

Точно так же:

document.getElementById("element").remove();

Но так как вы этого не сделаете иметь специальный идентификатор или класс в желаемом элементе DOM, который не может быть решением. Таким образом, вы должны получить родительский узел и удалить его дочерние элементы . Все, что вам нужно сделать, это использовать removeChild(/*element.lastChild*/). Так что это будет примерно так:

const element = document.querySelector('.gm-style-iw-d');
element.removeChild(element.lastChild);

---

ОБНОВЛЕНИЕ

Если вы хотите отключить контекстное меню в вашем другом div, чтобы они выглядели одинаково, есть Есть два способа сделать это.

Во-первых, вы можете сделать это, манипулируя HTML, например так:

<div oncontextmenu="return false;"></div>

или манипулируя DOM после начальной загрузки:

HTML

<div id='elementId'></div>

Javascript

document.getElementById('elementId').addEventListener('contextmenu', function() {
  return false;
});

ОБНОВЛЕНИЕ 2

Это не лучший подход для достижения того, чего вы хотели, но вы можете сделать это для того, чтобы закрывать диалог всякий раз, когда пользователь щелкает в любом месте карты, кроме маркера и самого диалога . В соответствии с документом карты Google вы можете использовать .close() метод для закрытия InfoWindow, например:

function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
  });

  // Check for custom icon
  if (props.iconImage) {
    // Set icon image
    marker.setIcon(props.iconImage);
  }

  // Check content
  if (props.content) {

    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });

    marker.addListener('click', function() {
      infoWindow.open(map, marker);
      setTimeout(() => {
        var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
      }, 1);
    });
  }
  google.maps.event.addListener(map, "click", function(event) {
    infoWindow.close();
  });
}

ОБНОВЛЕНИЕ 3

Для закрытия старого infoWindow Вы должны создать уникальный infoWindow и обновить его содержимое, чтобы оно было закрыто / открыто только на каждый marker.click. Таким образом, он будет работать как шарм.

var infoWindow = null;

// Add marker function
function addMarker(props) {
  var marker = new google.maps.Marker({
    position: props.coords,
    map: map,
    // icon: './img/marker1.png'
  });

  // Check for custom icon
  if (props.iconImage) {
    // Set icon image
    marker.setIcon(props.iconImage);
  }

  // Check content
  if (props.content) {

    google.maps.event.addListener(marker, 'click', function() {
      if (infoWindow) {
        infoWindow.close();
      }
      infoWindow = new google.maps.InfoWindow({
        content: props.content
      });
      infoWindow.open(map, marker);

      setTimeout(() => {
        var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
      }, 10);

    });
  }
  google.maps.event.addListener(map, "click", function(event) {
    infoWindow.close();
  });
}

Вот ссылка на рабочую демонстрацию: JSFiddle