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

【问题标题】：How to load Google Maps V3 with JQuery AJAX and PHP如何使用 JQuery AJAX 和 PHP 加载 Google Maps V3
【发布时间】：2013-01-08 15:25:57
【问题描述】：

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

谁能就我的问题给我一些想法或有用的链接，以便我参考？

提前谢谢...

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

【问题讨论】：

你能告诉我们为什么不把链接放在<script>标签中吗？
这只是部分代码。在我的真实代码中，我放置了

标签： php jquery ajax google-maps-api-3

【解决方案1】：

我不知道 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);
});

【讨论】：