Google지도 정보창의 Flexslider가 이미지를로드하지 않습니다.

flex 슬라이더를 사용하여 Google지도 infowindow의 django 앱에 슬라이더를 추가하려고합니다. 내 코드는 이것입니다.Google지도 정보창의 Flexslider가 이미지를로드하지 않습니다.

{% load thumbnail i18n humanize static %} 
<script type="text/javascript"> 
$(window).load(function(){ 
    $('#slide1 , #slide2').flexslider({ 
    animation: "slide", 
    slideshow: false, 
    controlNav : false, 
    start: function(slider) { 
    slider.removeClass('loading'); 
} 
    }); 

}); 
</script> 




<script> 
$(document).ready(function() { 
var markers=[]; 
var bounds = new google.maps.LatLngBounds(); 
var infowindow = new google.maps.InfoWindow(); 
var map = new google.maps.Map(document.getElementById("gmap"), { 
    zoom: 5, 
    minZoom: 2, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    panControl: false, 
    streetViewControl: false, 
    mapTypeControl: false 
}); 
{% for course in courses %} 
    {% if course.object.location %} 
     var lat = '{{ course.object.location.lat }}'; 
     var lng = '{{ course.object.location.lng }}'; 
     var myLatLng = new google.maps.LatLng(lat,lng); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      draggable:true, 
      title: '{{ course.object.location }}' 
     }); 

     var course_detail="<div class='flexslider loading custom_space_remove' id='slide1'><ul class='slides'><li class='relative'><a class='family-member' href='{{course.object.get_absolute_url}}'>{% thumbnail course.object.image '1000' as im %}<img src='{{ im.url }}'/>{% endthumbnail %}</a></li>{% for image in course.object.course_images.all %}<li class='relative'><a href='{{course.object.get_absolute_url}}'>{% thumbnail image.image '1000x749' crop='center' as im %}<img src='{{ im.url }}'/>{% endthumbnail %}</a></li>{% endfor %}</ul></div>" 

     makeInfoWindowEvent(map, infowindow, course_detail, marker); 


     bounds.extend(marker.position); 
     markers.push(marker); 
    {% endif %} 
{% endfor %} 

function makeInfoWindowEvent(map, infowindow, contentString, marker) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map, marker); 
    }); 
    } 

map.fitBounds(bounds); 
}); 
</script>

이미지를로드하는 것 외에는 정상적으로 작동합니다. 내가 Google지도 마커를 클릭하면 정보창에 완전한 HTML이 표시되지만 이미지 대신 '아약스 로딩 이미지/기능'이라는 이미지가 표시되어이 코드를 사용하여 이미지가로드되지 않음을 의미합니다.

출처

2015-01-12 Sajid Ahmad