如何使用 JQuery AJAX 和 PHP 加载 Google Maps V3


How to load Google Maps V3 with JQuery AJAX and PHP

>有谁知道如何用JQUERY AJAX加载Google Maps V3?下面是我的部分代码。我根据用户搜索词从推特API检索一些推文,我想在谷歌地图上加载用户的位置。这个部分代码写在索引中.php我使用 form 来获取文本字段的值。但是当我尝试加载它时,地图没有出现。所以我尝试使用视图源代码复制所有 html 代码,并将它们放入另一个 html 文件中并再次加载。随即显示地图。问题是使用表单时映射不起作用,以及我如何使用 JQUERY AJAX 加载它。我将 showMap() 函数放在按钮点击事件中,并使用表单来检索文本字段值。

任何人都可以为我的问题提供一些想法或有用的链接,以便我可以参考吗?

提前感谢...

    function initialize() {
            var latlng = new google.maps.LatLng(52.56952058,-1.16262487);
            var myOptions = {
                zoom: 2,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("mapContainer"), 
            myOptions);
<?php
for ($i = 0; $i < count($tweetList); $i++)
{
echo "var point$i = new google.maps.LatLng(". $tweetList[$i]->getLat(). ",". $tweetList[$i]->getLng().");'n";
echo "var marker$i = new google.maps.Marker({position: point$i, 
          map: map});'n";
}

?>

function showMap() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
            document.body.appendChild(script);
        }   

我不知道 twitter api,但你的代码应该类似于下面的代码,使用 jQuery 和 ajax 在浏览器端获取你的 Twitter 提要。

function init() {
    var latlng = new google.maps.LatLng(52.56952058,-1.16262487);
    var myOptions = {
        zoom: 2,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapContainer"), myOptions);
    getTweets();
}
function getTweets() {
    $.post('http://www.Twitter.com/endpoint',{term:'tweet search'}, function(data) {
        // assuming that twitter returns a JSON feed
        data = JSON.parse(data)
        // I don't know the twitter api, but here is the general idea:
        for (var i = 0; i<data.tweets.length; i++) {
            var tweet = data.tweets[i];
            var marker = new google.maps.Marker({options:'here'});
        }
    });
}
$(document).ready(function(){
    var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
        document.body.appendChild(script);
});