Question

这就是我想要做的事情。

我正在使用名为jTip的jQuery工具提示插件（http://www.codylindley.com/blogstuff/js/jtip/）。

此插件有效地将另一页加载到它正在显示的工具提示中。

所以我创建了另一个页面，里面有一个小的谷歌地图。该页面没有什么特别之处，它只显示带有单个标记的谷歌地图。

指向Google地图页面的链接如下所示。

<a  href="my_ajax_page.php?width=375" class="jTip" id="one" name="This is a tooltip header">Click here!</a>

如果我直接转到此页面，则页面显示正常。但是，通过工具提示插件，地图不再显示。地图页面如下。

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() 
    {
        var latlng = new google.maps.LatLng(35, 101);
        var myOptions = { zoom: 15, center: latlng, 
                          mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker( { position:latlng, 
                                               map: map, 
                                               animation: google.maps.Animation.DROP });   

    }
  </script>
</head>
<body>
  <div id="map_canvas" style="width:300px;height:300px"></div>
</body>
</html>

有关如何做到这一点的任何建议？

Answer 1

让jTip在iframe中打开新页面，或者创建包含地图的iframe页面的其他页面，然后将该页面加载到jTip中。

如果您不想使用iframe，请查看Google地图Asynchronously Loading the Javascript API。

Answer 2

我建议使用Google Maps API执行此操作：

http://code.google.com/apis/maps/documentation/javascript/

我在这个网站上使用jQuery UI成功实现了这个：

http://www.exploresouthernindiana.com/wheretosleep.php?s2=servicelink.serviceid%3D4&submit=Submit

非常欢迎您查看代码与Google API接口的sabramedia.js。

注意：我没有设计网站。我只是为他们设置了地图对话框。

通过jQuery AJAX显示Google Map页面

2 个答案: