我使用jQuery AJAX来从一个PHP脚本的一些结果被解析XML文档。该Ajax调用后，我whant显示来自谷歌API地图，在由PHP脚本创建一个div（的这是我的问题的）。

I'm using jquery ajax to get some results from a php script that is parsing an xml document. After that ajax call i whant to show a map from google api, in a div created by that php script (that's my problem).

是否有可能加载地图API到＆LT; D​​IV ID =地图画布＆GT; 是在PHP创建Ajax调用后？

Is it possible to load the maps API to the <div id="map-canvas"> that is created in php, after the ajax call??

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），但我不知道，如果它只是错了

This is what i've tried (and much more :p), but i dont even know if its just wrong.

任何帮助或咨询意见将AP preciated！

Any help or advise would be appreciated!

- 更新 -

像这样简单：

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

            }   
            });
        });
    });

和刚刚添加该＆LT;脚本SRC =htt​​ps://maps.googleapis.com/maps/api/js?sensor=false＆GT;＆LT; / SCRIPT＆GT; 的HTML文件。

And just adding this <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> to the HTML file.

这就是我whanted，it's加载＆LT; D​​IV ID =地图画布＆GT; ，因为它应该

That's what i whanted, it´s loading the <div id="map-canvas"> as it should.

泰帮忙呢！ 很抱歉，如果我没有坡口我的观点前，我有点新手;）

Ty for help anyway! Sorry if i didn't proove my point earlier, i'm a bit newbie ;)

推荐答案

谷歌地图必须在调用时加载中心：新google.maps.LatLng（-34.397，150.644），，所以从我的意见，你应该创建一个虚拟的地图和初始化页面加载

Google Maps must be loaded at the time you call center: new google.maps.LatLng(-34.397, 150.644),, so from my opinion you should create a dummy map and initialize it on page load

<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>

，那么你可以绑定任何你想要的。

then you can bind whatever you want.

注：我使用jQuery的 $（文件）。就绪（），但如果你不使用jQuery，你自己看着办吧。

Note: I used jQuery's $(document).ready(), but if you don't use jQuery you can figure it out.