将谷歌地图加载到由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

回答

相关问题