Google Maps API must click on marker twice to dynamically display image

Question

I display many markers on a Google Map. Clicking on a marker brings up an infowindow containing text and a small image. The image is dynamically loaded using Jscript. The owner of the server where I get the image insists on dynamic image loading since I could be displaying 100s or 1000s of markers. The markers were working fine until all of a sudden, I have to click on a marker TWICE in order to have the image displayed. The text displays immediately but not the image. I have a default image that is replaced by the dynamically loaded image. Before, the default image would briefly display and then be replaced by the dynamically loaded image. Now, the default image is displayed until the marker is clicked a 2nd time.

I should also mention that once the dynamic image has been displayed, you can go back and click on the marker and the dynamic image is displayed the 1st time. Only cached images are dynamically displayed on the first click of the marker.

I had been specifying v=3. I tried eliminating the version number but that does not fix it.

This exact same code used to display the image immediately when the marker was clicked. Now, you have to click on the marker TWICE. I am not getting any console errors.

    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

You are using jQuery to dynamically modify the InfoWindow content. You need to wait for the domready event on the InfoWindow before running that code.

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');
    });
});

proof of concept fiddle

code snippet:

 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>