將谷歌地圖加載到由ajax加載的div

我正在使用jquery ajax從解析xml文檔的php腳本中獲取一些結果。之後，ajax打電話給我顯示從谷歌api地圖，在該PHP腳本創建一個div（這是我的問題）。將谷歌地圖加載到由ajax加載的div

是否有可能將地圖API加載到在php中創建的<div id="map-canvas">，在ajax調用之後？

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 FILE

... 
    //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），但我甚至不知道如果它只是錯。

任何幫助或建議，將不勝感激！

- 更新 -

像這樣簡單：

JavaScript文件

//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文件。

這就是我whanted，它正在加載<div id="map-canvas">，因爲它應該。

Ty for help反正！對不起，如果我以前沒有提出我的觀點，我有點新手;）

來源

2013-07-12 Zéca

-2

你可以在AJAX調用後調用js函數。你可能最好定義gmaps的初始化函數，在AJAX調用之外的某個地方，然後在成功調用你的php腳本後調用你的gmap函數（在需要setTimeout('gmap()', 2000);函數的情況下）。但是，當我看到你的腳本首先創建格，然後調用GMAP功能

來源

2013-07-12 13:25:06 Ivan

哎喲，這很討厭。如果加載時間超過2000毫秒會怎麼樣？ – BenLanc

谷歌地圖必須在你打電話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，你自己看着辦吧。

來源

2013-07-12 13:26:47

嗨，夥計。首先關閉所有你的回覆，並且我正在使用jQuery！那麼，我正在測試你寫的東西，不應該像「display：none」那樣「樣式（頂部/左邊）」，然後在ajax調用之後用jquery顯示div？壞消息是，當我這樣做時，Gmap變得混亂起來，全是灰色和有趣的：s 或者我可能誤解了你！ –

我懷疑你的initialize由於範圍問題沒有被調用，因爲它只在Ajax回調的範圍內定義，而不是地圖SDK預期的全局範圍。

如果您必須異步加載Google Maps JS，請使用jQuery.getScript()，然後在getScript的回調中初始化您的地圖。

它可能會更好，雖然你有效地鏈接兩個請求，這是不是特別表現。

，你可以：

創建一個全局變量設置爲0
火了你的Ajax調用的地圖div的
使用getScript加載地圖SDK異步兼
在你的Ajax和getScript調用的回調函數，增加一個你剛纔設置的全局變量
有一個循環運行每50ms左右（遞歸調用比如setTimeout），檢查你設置的變量的值，等到它等於2，設置超時時間爲50ms左右再次檢查
一旦滿足上述條件，就像你一樣初始化你的地圖知道div和地圖API都已加載

來源

2013-07-12 13:40:02 BenLanc

嘿。謝謝你給我你的時間。我正在嘗試另一種東西，也許我會後來嘗試你的建議:) –

將谷歌地圖加載到由ajax加載的div

回答

相關問題