Php 将google地图加载到ajax加载的div

我使用jQueryAjax从解析xml文档的php脚本中获得一些结果。在那次ajax调用之后，我想在php脚本创建的div中显示来自GoogleAPI的映射（这是我的问题）

在ajax调用之后，是否可以将maps API加载到用php创建的

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>";
}

...
    //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);

            }   
            });
        });
    });

只需将此

添加到HTML文件中

这就是我所说的，它正在加载它应该加载的

不管怎样，我需要帮助！

---

对不起，如果我之前没有证明我的观点，我有点新手；）

您可以在AJAX调用之后调用js函数。您可能最好在AJAX调用之外的某个地方定义gmap初始化函数，然后在成功调用php脚本后调用gmap函数（如果需要使用

setTimeout（'gmap（）'，2000）；

function）。但正如我看到的脚本，它首先创建div，然后调用gmap的函数

谷歌地图必须在您调用

中心时加载：new Google.Maps.LatLng（-34.397150.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>

函数initGoogle（）{
myLatLng=new google.maps.LatLng（0,0）；
变量映射选项={
缩放：1，
中心：myLatLng，
mapTypeId:google.maps.mapTypeId.HYBRID
};
map=new google.maps.map（document.getElementById（'dummy'），mapOptions）；
}
$（文档）.ready（函数（）{
var script=document.createElement（'script'）；
script.type='text/javascript'；
script.id=‘谷歌地图’；
script.src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initGoogle';
document.body.appendChild（脚本）；
});
#虚拟{位置：绝对；顶部：-5000px；左侧：-5000px；}

然后你可以绑定任何你想要的东西

---

---

注意：我使用了jQuery的

$（document）.ready（）

，但是如果您不使用jQuery，您可以找到答案。

我怀疑您的

初始化

没有被调用是因为范围问题，因为它只在Ajax回调的范围中定义，而不是Maps SDK所期望的全局范围

如果您必须异步加载Google Maps JS，请在

getScript

的回调中使用并初始化您的地图

这可能会更好，因为您正在有效地链接两个请求，这并不是特别有效

你可以：

• 创建一个设置为

  0

• 为Maps div发出Ajax调用
• 使用

  getScript

  异步并发加载Maps SDK
• 在Ajax和getScript调用的回调函数中，增加刚刚设置的全局变量
• 让一个循环大约每50毫秒运行一次（例如，递归调用

  setTimeout

  ），检查您设置的变量的值，直到它等于

  2

  ，再将超时设置50毫秒左右以再次检查
• 满足上述条件后，初始化映射，因为您知道div和mapsapi都已加载

---

哎哟，真恶心。如果加载时间超过2000毫秒怎么办？嗨，伙计。首先，感谢您的回复，是的，我正在使用jQuery！好的，我正在测试您所写的内容，“样式（顶部/左侧）”不应该像

display:none

那样简单，然后在ajax调用后用jquery显示div吗？坏消息是，当我这么做的时候，Gmap变得一团糟，一片灰色，很有趣：或者我误解了你！嘿谢谢你给我时间。我正在尝试另一种东西，也许我以后会尝试你的建议：）