Ошибка добавления изображений в API GoogleMaps v3 InfoBox

Question

Я пытаюсь добавить изображения в infoBox внутри многих маркеров с помощью API GoogleMaps v3.

Код работает нормально, прежде чем пытаться добавить изображения (опустив указанный код).

Peace Javascript код на HTML странице:

function LoadMapa(value) 
{  
var idInfoBoxAberto; 
var infoBox = []; 
function abrirInfoBox(id, marker) { 
    if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') 
    {infoBox[idInfoBoxAberto].close(); 
    } 
    infoBox[id].open(map, marker); 
    idInfoBoxAberto = id; 
    } 
initialize(value); 
function initialize(value) { 
    var mapCanvas = document.getElementById('map_canvas'); 
    var mapOptions = { 
    center: new google.maps.LatLng(-3.7280,-38.5303), 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    var latlngbounds = new google.maps.LatLngBounds(); 
    var markers = []; 
    //BUILDING MARKERS 
    $.each(value, function(i,e) { 
    marker = new google.maps.Marker({ 
      map: map, 
      draggable: true, 
      position: new google.maps.LatLng(new Number(e.latitude), new Number(e.longitude)), 
      title: e.nome_posto_saude, 
      visible: true 
     }), 
     boxText = document.createElement("div"), 
     //these are the options for all infoboxes 
     myOptions = { 
      content: boxText, 
      disableAutoPan: false, 
      maxWidth: 0, 
      pixelOffset: new google.maps.Size(-140, 0), 
      zIndex: null, 
      boxStyle: { 
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
      opacity: 0.75, 
      width: "280px" 
      }, 
      closeBoxMargin: "12px 4px 2px 2px", 
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
      infoBoxClearance: new google.maps.Size(1, 1), 
      isHidden: false, 
      pane: "floatPane", 
      enableEventPropagation: false 
     }; 
     //define the text and style for all infoboxes 
     boxText.style.cssText = " border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;"; 
     //TEXT BOX CUSTOMIZATION    
     var BoxElements = "<h3 font-weight: bold; text-align:center;>"+e.nome_posto_saude + "</h3><br>" + "Resposta 1:"+e.lista_respostas[0] + "<br>" + "resposta 2:"+e.lista_respostas[1]+ "<br>" + "resposta 3:"+e.lista_respostas[2]+ "<br>" + "resposta 34:787878"; 
     var imagesElements = ""; 
//<------------------- IF I OMIT THIS PART BELOW ALL WORKS!!!!!! ------>    
     //OBTAINING IMAGES_pATH_LIST: 
     var image_url = "get_images_path/"+e.id; 
     var imagesLoaded = false; 
    $.getJSON(image_url,function(data1,innerData){ 
     for(var y=0; y<3;y++) 
     { 
     if(typeof data1[y] != "undefined") 
     { 
      imagesElements += "<img class=\"picture\" th:src=\"@{/image/"+data1[y]+"/}\" style=\"width: 5px; height: 5px;\"></img>"; 
      } 
     }  
     boxText.innerHTML = BoxElements + imagesElements; 
     alert(BoxElements + imagesElements); 
      }); 
//<--------------IF I OMIT THIS PART ABOVE ALL WORKS! ----------_> 
    boxText.innerHTML = BoxElements + imagesElements; 
    infoBox[new Number(e.id)] = new InfoBox(myOptions); 
    infoBox[new Number(e.id)].marker = marker; 
    var ib = new InfoBox(myOptions); 
    google.maps.event.addListener(marker, "click", function (e) { 
    boxText.innerHTML = BoxElements + imagesElements; 
    ib.open(map, this); // change the map variable appropriately 
    }); 
    markers.push(marker); 
    latlngbounds.extend(marker.position); 
}); 
    var markerCluster = new MarkerClusterer(map, markers); 
    map.fitBounds(latlngbounds); 
    } 
google.maps.event.addDomListener(window, 'load', initialize); 
} 

Так, Omiting указанный код для добавления изображений, страница HTML показывает что-то вроде этого, когда я нажимаю на маркер:

Если я добавлю этот мир кода, я сделаю getJSON, получив путь к изображению для каждого маркера, и я добавлю эти образы с помощью th е innerHTML с imagesElements кодом:

//TEXT BOX CUSTOMIZATION    
var BoxElements = "<h3 font-weight: bold; text-align:center;>"+e.nome_posto_saude + " </h3><br>" + "Resposta 1:"+e.lista_respostas[0] + "<br>" + "resposta 2:"+e.lista_respostas[1]+ "<br>" + "resposta 3:"+e.lista_respostas[2]+ "<br>" + "resposta 34:787878"; 
var imagesElements = ""; 

//OBTAINING IMAGES_pATH_LIST: 
var image_url = "get_images_path/"+e.id; 
var imagesLoaded = false; 
$.getJSON(image_url,function(data1,innerData){ 
    for(var y=0; y<3;y++) { 
     if(typeof data1[y] != "undefined") { 
      imagesElements += "<img class=\"picture\" th:src=\"@{/image/"+data1[y]+"/}\" style=\"width: 5px; height: 5px;\"></img>"; 
     } 
    } 

    boxText.innerHTML = BoxElements + imagesElements; 
    alert(BoxElements + imagesElements); 
}); 
} 

Это предупреждение показывает мне, что код imagesElements правильно (getJSON для получения источника изображения получен OK в getJSON, но не отображается изображение ни моя весна-сервер не получать любой запрос).

Примечание: Я работаю с Thymeleaf, но я испытал с кодом HTML <img> и он не работает:

imagesElements += "<img class=\"picture\" src=\"@/image/"+data1[y]+"/\" style=\"width: 5px; height: 5px;\"></img>"; 

Какая моя ошибка? возможно, InfoBox не поддерживает изображения внутри?

Спасибо

Answer 1

Я не знал, что getJSON работает асинхронно, поэтому решить вопрос я должен положить весь код внутри getJSON.