Insert image into Google Maps infoWindow via URL

Question

I have a Google Map displaying an array of markers formatted as Panoramio thumbnails. I have set up infoWindows for each marker in the array, in order to show a larger version of the image upon marker click.

My strategy has been to retrieve the URL of the Panoramio thumbnails through JSON.Stringify, run String Replace on them to replace the "mini_square" image size with "medium" in the URL path (and to remove the double-quotes on each end), and then pass the url as an image source to the infoWindow; I get only a "broken image" icon when clicking the marker. If anyone has any idea why the URL I passed is not resulting in the image being displayed it would be a great help.

Here is my code below.

  <style>
    #map  {
      width: 100%;
      height: 100%;
  }
   </style>

<script>
  pixMap = new google.maps.Map(document.getElementById('map'), pixOptions);


  var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
  var pix_Nfo = new google.maps.InfoWindow({maxWidth: 400});

  $.getJSON(thumbUrl, function(data) {

     for (var i = 0; i < data.photos.length; i++) {
       var item = data.photos[i];
       var latLng = new google.maps.LatLng(item.latitude, item.longitude); 
       var marker = new google.maps.Marker({
         position:latLng,
         icon: item.photo_file_url
       });
     marker.setMap(pixMap);

    (function(marker, item)  {    
       google.maps.event.addListener(marker, "click", function(e)  {
       bigPic = JSON.stringify(item.photo_file_url);
       var bp = bigPic.replace("mini_square","medium");
       //pix_Nfo.setContent('<img src=bp>');
       var bpnq = bp.replace(/"/g,"");
       pix_Nfo.setContent('<p><src img=bpnq></p>');
       pix_Nfo.open(pixMap, marker);
       });
    })(marker, item);
    };
  }); 
</script>

Answer 1

To display an image in HTML you need to pass in the URL.

   google.maps.event.addListener(marker, "click", function(e)  {
     bigPic = JSON.stringify(item.photo_file_url);
     var bp = bigPic.replace("mini_square","medium");
     var bpnq = bp.replace(/"/g,"");
     pix_Nfo.setContent('<p><img src='+bpnq+'></p>');
     pix_Nfo.open(pixMap, marker);
   });

proof of concept fiddle

// function initialize() {
pixMap = new google.maps.Map(document.getElementById('map'));


var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=100&minx=-2.494046&miny=53.429721&maxx=-2.00048&maxy=53.528126&size=mini_square&mapfilter=true&callback=?";
var pix_Nfo = new google.maps.InfoWindow({
  maxWidth: 400
});

$.getJSON(thumbUrl, function(data) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < data.photos.length; i++) {
    var item = data.photos[i];
    var latLng = new google.maps.LatLng(item.latitude, item.longitude);
    bounds.extend(latLng);
    var marker = new google.maps.Marker({
      position: latLng,
      icon: item.photo_file_url
    });
    marker.setMap(pixMap);

    (function(marker, item) {
      google.maps.event.addListener(marker, "click", function(e) {
        bigPic = JSON.stringify(item.photo_file_url);
        var bp = bigPic.replace("mini_square", "medium");
        //pix_Nfo.setContent('<img src=bp>');
        var bpnq = bp.replace(/"/g, "");
        pix_Nfo.setContent('<p><img src=' + bpnq + '></p>');
        pix_Nfo.open(pixMap, marker);
        // reopen infowindow, so fits in map.
        google.maps.event.addListener(pix_Nfo, 'domready', function() {
          google.maps.event.trigger(marker, 'click');
        });
      });
    })(marker, item);
  };
  pixMap.fitBounds(bounds);
});
//   }
// google.maps.event.addDomListener(window,'load',initialize);

body,
html,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>