Удалите атрибут «Закрыть заголовок» из информационного окна пользовательского маркера Карт Google

Question

Я пытаюсь выяснить, как убрать слово «Закрыть» в верхнем правом углу этого изображения:

Iобнаружил, что я могу запустить эту команду jQuery, и она работает, но только если я запускаю команду после того, как окно уже открыто:

            jQuery(".gm-ui-hover-effect").attr('title', '');

Эта проблема заключается в том, что, если я помещу ее в прослушиватель щелчков дляИнформационное окно, похоже, не работает:

    function bindInfoWindow(marker, map, infowindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(html);
            infowindow.open(map, marker);
            jQuery(".gm-ui-hover-effect").attr('title', '');
        });
    }

Я открыт, чтобы скрыть это с помощью CSS / JS / что угодно, но после поиска в течение 2 дней я не могу найти решение для этого (и дляпо какой-то причине мой Chrome не отформатировал минимизированный код, поэтому трассировка оказалась очень сложной, но это еще одна проблема).

У кого-нибудь есть идеи, как это скрыть?

Answer 1

Используйте событие domready в InfoWindow , чтобы запустить функцию удаления заголовка.

Из документации :

domready
function ()
Аргументы: нет
Это событие вызывается, когда содержимое, содержащее InfoWindow, присоединяется к DOM. Возможно, вы захотите отслеживать это событие, если вы динамически создаете содержимое информационного окна .

function bindInfoWindow(marker, map, infowindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(html);
        infowindow.open(map, marker);
        google.maps.event.addListener(infowindow, 'domready', function() {
          jQuery(".gm-ui-hover-effect").attr('title', '');
        });
    });
}

подтверждение концепции скрипта

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

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    '<p>some content</p>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    console.log("open infowindow");
    infowindow.open(map, marker);
    google.maps.event.addListener(infowindow, 'domready', function() {
      console.log("remove title")
      jQuery(".gm-ui-hover-effect").attr('title', '');
    });
  });
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>