Блог

Главная - Вопросы по программированию - Удалить атрибут Close title из информационного окна пользовательского маркера Google Maps

Удалить атрибут Close title из информационного окна пользовательского маркера Google Maps

#jquery #google-maps

#jquery #google-карты

Вопрос:

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

введите описание изображения здесь

Я обнаружил, что могу запустить эту команду 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 / чего угодно, но после двухдневных поисков я не могу найти решение для этого (и по какой-то причине мой Chrome не форматирует уменьшенный код, поэтому отслеживание оказалось очень сложным, но это другая проблема).

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

Комментарии:

1. Попробуйте добавить setTimeout в случае, если open() он асинхронный. Также предполагается, что у вас правильный класс

Ответ №1:

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

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

domready
функция ()
Аргументы: Нет
Это событие запускается, когда содержимое InfoWindow, содержащее содержимое 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', '');
        });
    });
}

проверка концепции fiddle

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

 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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qkamp;callback=initMap"></script>