JQuery 함수가 아무 것도 출력하지 않습니다.

Question

이 jquery 함수를 작동 시키지만 결과는 얻지 않으려 고합니다. 여기 있습니다. setmap (서블릿)에서 json으로 포맷 된 목록을받습니다. 나는 목록을 얻는다는 것을 확신하지만 불행히도 나는지도가 화면에 나타나지 않는다.

$(document).ready(function(){ 

    $("#airports").click(function(){ 

     $.getJSON('setmap', function(list) {  

      var mapOptions = { 
       zoom: 2, 
       mapTypeId: new google.maps.MapTypeId.TERRAIN 
      }; 

      $('.grid_12').append($("<div id='mapCanvas'></div>")); 

      var map = new google.maps.Map(mapCanvas, mapOptions); 

      if(list.length > 0) 
      { 
       for (var i = 0; i < list.length; i++) 
       { 
        var latLng = new google.maps.LatLng(list[i].latitude,list[i].longitude); 
        var marker = new google.maps.Marker({ 
         position: latLng, 
         map: map 
        }); 
       }  
      } 

     }); 

    }); 
}); 

이 라인에서

<article> 
    <section class="grid_12"></section> 
</article> 

Answer 1

HTML :

var map = new google.maps.Map(mapCanvas, mapOptions); 

mapCanvas가 정의되어 있지 않습니다. 일부 브라우저에서는 모든 ID에 대해 기호를 정의하기 때문에 암시 적으로 작동하지만 실제로는 그에 의존해서는 안됩니다. 난 당신이 거기 DOM 요소를 전달하려는 있으리라 믿고있어 (즉, 구글지도가 원하는 기능), 그래서 당신은 더 명시 적으로 다음과 같은 것을 수행 할 수

당신은 실행 가능한 데모를 제공하지 않았으므로

var mapCanvas = ($("<div id='mapCanvas'></div>").appendTo('.grid_12'))[0]; 
var map = new google.maps.Map(mapCanvas, mapOptions); 

있을 수 있습니다 다른 오류도 있습니다.