Вставьте изображение в информационное окно Google Maps через URL

Question

У меня есть карта Google, отображающая массив маркеров, отформатированных как миниатюры Panoramio. Я установил infoWindows для каждого маркера в массиве, чтобы показать увеличенную версию изображения при нажатии на маркер.

Моя стратегия состояла в том, чтобы получить URL-адрес миниатюр Panoramio с помощью JSON.Stringify, запустить на них String Replace, чтобы заменить размер изображения "mini_square" на "medium" в пути URL (и удалить двойные кавычки на каждом конце). и затем передайте URL как источник изображения в информационное окно; При нажатии на маркер я получаю только значок "сломанное изображение". Если у кого-то есть идея, почему URL, который я передал, не приводит к отображению изображения, это было бы очень полезно.

Вот мой код ниже.

  <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

Чтобы отобразить изображение в HTML, вам необходимо указать 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);
   });

доказательство концепции скрипки

// 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>