Google Maps API (JS) InfoWindow issue showing up images (html <img> tags)

Question

I'm making a tiny web app with Google Maps API (JavaScript), in my app I have a for to loop through locations (latitude and longitude) an some other information... Into the for I have this code:

for (i = 0; i < locations.length; i++) {  
    var coords =  new google.maps.LatLng(Number(locations[i][1]), Number(locations[i][2]))
    marker = new google.maps.Marker({
      position: coords,
      map: map
    });

    var iwcontent="<a href='app.php?id="+locations[i][3]+"' target='_blank'><h4><img='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'> "+locations[i][0]+"</h4></a>";
    console.log(iwcontent);
    bounds.extend(coords);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(iwcontent);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }

In the console I recieve correct HTML structures (imho), like this:

<a href='app.php?id=ABCD-J2WZSW' target='_blank'><h4><img='images/icons/ABCD-J2WZSW/logo.jpg' class='minilogo'> ABCD, 33.</h4></a>

in4b: the file images/icons/ABCD-J2WZSW/logo.jpg exists and .minilogo class have a fixed (visible) width css value.

The problem/issue is: I don't see any image!

Interesting: If I "inspect" the infoWindow, I can see the following:

<a href="app.php?id=ABCD-J2WZSW" target="_blank"><h4><img='images icons="" abcd-j2wzsw="" logo.jpg'="" class="minilogo"> ABCD, 33.</img='images></h4></a>

Please note:

1. The tag is totally messed up!
2. In the tag the id value is lowercase.

Why this happens? How can I fix it? Thanks for reading, and please forgive my bad english!

Answer 1

You have an issue with creating your img tag. In your code, you cannot assign a url value to img, its assigned to the src attribute. Here is your img tag code in the wrong format - <img='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'>, and since there is no src attribute the whole HTML structure is getting messed up.

It should be -

<img src='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'>

That should take care of your issue!