Google Maps API должен дважды щелкнуть маркер для динамического отображения изображения

Question

Я показываю много маркеров на карте Google.При нажатии на маркер открывается информационное окно, содержащее текст и небольшое изображение.Изображение динамически загружается с использованием Jscript.Владелец сервера, на котором я получаю изображение, настаивает на динамической загрузке изображения, поскольку я мог отображать маркеры с сотнями или тысячами.Маркеры работали нормально до тех пор, пока мне вдруг не пришлось щелкнуть маркер ДВАЖДЫ, чтобы отобразить изображение.Текст отображается сразу, но не изображение.У меня есть изображение по умолчанию, которое заменяется на динамически загружаемое изображение.Ранее изображение по умолчанию кратко отображалось, а затем заменялось динамически загружаемым изображением.Теперь изображение по умолчанию отображается до тех пор, пока маркер не будет нажат во второй раз.

Следует также отметить, что после отображения динамического изображения вы можете вернуться назад и щелкнуть маркер и отобразится динамическое изображение.1-й раз.При первом нажатии маркера динамически отображаются только кэшированные изображения.

Я указывал v = 3.Я попытался удалить номер версии, но это не исправило его.

Этот точно такой же код используется для отображения изображения сразу после нажатия на маркер.Теперь вы должны нажать на маркер ДВАЖДЫ.Я не получаю никаких ошибок консоли.

    var currentInfoWindow = null;
    var marker6891957 = new google.maps.Marker({
    position: new google.maps.LatLng(54.3958333, 9.79166666),
    icon: '/images/blue-dot.png',
    map: map,
    title: 'DC6UW'
});
var infowindow6891957 = new google.maps.InfoWindow({
    content: '<b><a href="https://www.qrz.com/db/DC6UW" target=_blank>DC6UW</a></b><br>Fed. Republic of Ger<br>Digital 20m 50.00W<br>Distance: 4159 miles<br>Milliwatts/Mile: 12.02<br><a href="https://s3.amazonaws.com/files.qrz.com/w/dc6uw/100_6713.jpg" target=_blank><img id="id" src="images/qrzimagen.png" height=110></a><br>Click for larger image<br><br>'
});
google.maps.event.addListener(marker6891957, 'click', function() {
    if (currentInfoWindow != null) {
        currentInfoWindow.close();
    }
    infowindow6891957.open(map, marker6891957);
    currentInfoWindow = infowindow6891957;
    $('#id').attr('src', 'https://s3.amazonaws.com/files.qrz.com/w/dc6uw/100_6713.jpg');
});

Answer 1

Вы используете jQuery для динамического изменения содержимого InfoWindow.Вам нужно дождаться события domready на InfoWindow, прежде чем запускать этот код.

google.maps.event.addListener(marker6891957, 'click', function() {
    if (currentInfoWindow != null) {
        currentInfoWindow.close();
    }
    infowindow6891957.open(map, marker6891957);
    currentInfoWindow = infowindow6891957;
    google.maps.event.addListenerOnce(currentInfoWindow, 'domready', function() {
       $('#id').attr('src', 'https://cdn.pixabay.com/photo/2015/11/07/11/34/kitten-1031261_960_720.jpg');
    });
});

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

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(54.3958333, 9.79166666),
    zoom: 10
  });

  var currentInfoWindow = null;
  var marker6891957 = new google.maps.Marker({
    position: new google.maps.LatLng(54.3958333, 9.79166666),
    // icon: '/images/blue-dot.png',
    map: map,
    title: 'DC6UW'
  });
  var infowindow6891957 = new google.maps.InfoWindow({
    content: '<b><a href="https://www.qrz.com/db/DC6UW" target=_blank>DC6UW</a></b><br>Fed. Republic of Ger<br>Digital 20m 50.00W<br>Distance: 4159 miles<br>Milliwatts/Mile: 12.02<br><a href="https://cdn.pixabay.com/photo/2015/11/07/11/34/kitten-1031261_960_720.jpg" target=_blank><img id="id" src="images/qrzimagen.png" height=110></a><br>Click for larger image<br><br>'
  });
  google.maps.event.addListener(marker6891957, 'click', function() {
    if (currentInfoWindow != null) {
      currentInfoWindow.close();
    }
    infowindow6891957.open(map, marker6891957);
    currentInfoWindow = infowindow6891957;
    google.maps.event.addListenerOnce(currentInfoWindow, 'domready', function() {
      $('#id').attr('src', 'https://cdn.pixabay.com/photo/2015/11/07/11/34/kitten-1031261_960_720.jpg');
    });
  });
  google.maps.event.trigger(marker6891957, 'click');
}

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>
<input id="btn" value="click" type="button" />
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap" async defer></script>