div에로드 된 Google지도로드 ajax

Question

xml 문서를 구문 분석하는 PHP 스크립트에서 일부 결과를 얻으려면 jquery ajax를 사용하고 있습니다. 그 아약스는 내가 그 문제는 그게 내 문제 야 에 의해 만들어진 div에서, 구글 API에서지도를 보여 whant 내 전화)입니다.

ajax 호출 후 PHP에서 생성 된 <div id="map-canvas">에지도 API를로드 할 수 있습니까 ??

PHP 파일

... $xmlData = simplexml_load_file("using an http service");    
    echo "<div id='map-canvas'></div>"; //LOAD MAPP HERE! 
    echo "<ul>"; 
    foreach($xmlData->StopTimes->StopTime as $stopTime){ 
     echo "<li>",$stopTime->attributes()->Hour,"</li>"; 
    } 
    echo "</ul>"; 
} 

AJAX 파일

... 
    //station click, show next stops 
    $('.station_link').click(function(){ 
     var station_text = $(this).text(); 
     $.ajax({        //make the ajax call 
      type: "POST",      //use POST/GET 
      url: "../server_side/nextStop.php", //file to send data 
      data: {poststation : station_text},   //postlink -> php($_POST) value/text -> jquery var value 
      success: function(data){   //on success, do something 
       $('#next_stop').html(data); 
       $('#next_stop').show(); 

      //Google maps API 
       function initialize() { 
         var mapOptions = { 
         zoom: 8, 
         center: new google.maps.LatLng(-34.397, 150.644), 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
         } 
         var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
        } 

        function loadScript() { 
         var script = document.createElement("script"); 
         script.type = "text/javascript"; 
         script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize"; 
         document.body.appendChild(script); 
        } 

        loadScript(); 
      } 
      }); 
     }); 
    }); 

이 내가 시도 (그리고 더 많은 : p)를 한 것입니다,하지만 난 심지어는 단지 잘못 알고 해달라고 .

어떤 도움이나 조언을 부탁드립니다.

- UPDATE -이 같은

로 간단한 :

자바 스크립트 파일

//station click, show next stops 
    $('.station_link').click(function(){ 
     var station_text = $(this).text(); 
     $.ajax({        //make the ajax call 
      type: "POST",      //use POST/GET 
      url: "../server_side/nextStop.php", //file to send data 
      data: {poststation : station_text}, //postlink -> php($_POST) value/text -> jquery var value 
      success: function(data){   //on success, do something 
       $('#next_stop').html(data); 
       $('#next_stop').show(); 


       // Google maps API 
       var mapOptions = { 
        center: new google.maps.LatLng(37.7831,-122.4039), 
        zoom: 12, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      } 
      }); 
     }); 
    }); 

그리고 바로이 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>에 HTML 파일을 추가.

그건 내가 바라는대로, <div id="map-canvas">을로드해야합니다.

어쨌든 도움을 청하십시오! 미안 내가 일찍이 내 요점을지지하지 않았다면 나는 조금 초보자이다.)

Answer 1

AJAX 호출 후에 js 함수를 호출 할 수있다. 아마 AJAX 호출 외부의 gmaps 초기화 함수를 정의하고 php 스크립트를 호출 한 후 gmap 함수 (setTimeout('gmap()', 2000); 함수가 필요한 경우)를 호출하는 것이 좋습니다. 나는 당신의 스크립트를 참조하지만 먼저 사업부를 만든 다음 GMAP의 함수를 호출

Answer 2

Google지도는 내 의견에서 당신이 더미지도를 작성해야하고 페이지로드를 초기화 있도록, center: new google.maps.LatLng(-34.397, 150.644),를 호출 할 때로드해야

<div id="dummy"></div> 
<script type="text/javascript"> 

function initGoogle(){ 
    myLatLng = new google.maps.LatLng(0,0); 
    var mapOptions = { 
     zoom: 1, 
     center: myLatLng, 
     mapTypeId: google.maps.MapTypeId.HYBRID 
    }; 

    map = new google.maps.Map(document.getElementById('dummy'), mapOptions); 
} 

$(document).ready(function(){ 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.id = 'googleMaps'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initGoogle'; 
    document.body.appendChild(script); 
}); 

</script> 

<style type="text/css"> 
    #dummy { position: absolute; top: -5000px; left: -5000px; } 
</style> 

원하는대로 바인딩 할 수 있습니다.

---

참고 : 나는 jQuery의 $(document).ready() 사용하지만, 당신이 jQuery를 사용하지 않는 경우 당신은 그것을 알아낼 수 있습니다.

Answer 3

initialize은 Ajax 콜백 범위에서만 정의되었으므로 범위 문제로 인해 호출되지 않고 있으며 Maps SDK에서 기대할 전역 범위가 아닌 것으로 의심됩니다.

Google지도 JS를 비동기 적으로로드해야하는 경우 jQuery.getScript()을 사용하고 getScript의 콜백에서지도를 초기화합니다.

특히 두 가지 요청을 연결하는 경우 성능이 좋지 않지만 더 좋을 수 있습니다.

당신 수 :

• 비동기과 동시에에서
• 을지도 SDK를로드
• 사용 getScript div에지도에 대한 귀하의 Ajax 호출 떨어져 0
• 화재로 설정 전역 변수 만들기 Ajax 및 getScript 호출의 콜백 함수, 방금 설정 한 전역 변수 증가
• 매 50ms마다 실행되는 루프가 있습니다 (재귀 호출 이 2 동일 할 때까지 기다리고, 사용자가 설정 한 변수의 값을 확인,) 예를 들어, setTimeout을 보내고, 조건이 위의 만족되면, 당신으로지도를 초기화 다시
• 을 확인하는 또 다른 50ms의 정도에 대한 시간 제한을 설정 div 및 maps API가 모두로드되었음을 확인하십시오.