jQuery 对话窗口内的 Google Maps JavaScript API答案

【问题标题】：Google Maps JavaScript API inside of jQuery Dialog WindowjQuery 对话窗口内的 Google Maps JavaScript API
【发布时间】：2013-05-14 16:00:33
【问题描述】：

我使用 Google Maps JavaScript API 来显示地图 - https://developers.google.com/maps/documentation/javascript/

我需要该 API 中的某些静态地图没有的功能。

所以这个页面作为一个独立页面可以正常工作：

<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

<script>


    function initialize() {

        // Set map coordinates with lat and lng
        var cord = new google.maps.LatLng(28.545078,-81.377196);

        // Set map options
        var mapOptions = {
            zoom: 15,
            center: cord,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Set map
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);


        // Set map marker
        var marker = new google.maps.Marker({
            position: cord,
            map: map,
            title: 'Test'
        });

    }


    // Load Map
    google.maps.event.addDomListener(window, 'load', initialize);



</script>

</head>

<body>
<div id="map-canvas"style="width:600px; height:500px"></div>
</body>

</html>

我需要让该页面在 jQuery 对话窗口中运行。

我调用对话框并像这样加载外部页面：

<script type="text/javascript">

    $(document).ready(function() {


        $("#cc").click(function(){

            $("#detailWin").dialog({
                autoOpen: false,
                modal: true,
                width:700,
                height:600,
                show: "fade",
                close: "fade",
                open: function ()
                {
                    $(this).load('p2.php');

                }
            });

            $('#detailWin').dialog("open");


        });

    });

</script>

因此，当我将第一组代码包含到 maps.php 页面时，它不起作用。我意识到我不想在包含的页面上包含所有和标签。我一直在尝试很多不同的方法，但我无法在对话窗口中加载地图。

我尝试使用 jQuery $.getScript() 加载地图 API URL，但没有帮助。

如果有人能帮我找出最好的方法来完成这项工作，我将不胜感激，因为我被困住了。

谢谢！

更新：

我最终让它像这样工作（这是第二页 maps.php）：

<script type="text/javascript">

$(document).ready(function() {

    function initialize() {

        // Set map coordinates with lat and lng
        var cord = new google.maps.LatLng(28.545078,-81.377196);

        // Set map options
        var mapOptions = {
            zoom: 15,
            center: cord,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // Set map
        var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

        // Set map marker
        var marker = new google.maps.Marker({
            position: cord,
            map: map,
            title: 'Test'
        });

    }

    // Load Map
    google.maps.event.addDomListener(window, 'load', initialize);


    initialize();

    });


 </script>


<div>

    <div id="map-canvas"style="width:600px; height:500px"></div>

</div>

【问题讨论】：

您选择的浏览器调试器中有任何错误消息吗？
不，几乎我尝试的每一种方式都只是得到一个空白页面，而 Firebug 没有显示任何错误。谢谢

标签： javascript jquery google-maps

【解决方案1】：

这里有两个重要的考虑因素：-

确保所有的 javascript/jQuery 都包含在父页面中。不要尝试通过 AJAX 传递 js。
确保仅当画布可见时才初始化地图。初始化一个不可见的画布只是部分成功。

根据您要执行的操作，您的代码可能是这样的：

$(document).ready(function() {
    var $detailWin,
        dialogInitialized,
        map;

    function getDialogContent() {
        if(dialogInitialized) return;
        dialogInitialized = true;//Well, at least initializing.
        $.get('p2.php').done(function(html) {
            $detailWin.html(html);
            var cord = new google.maps.LatLng(28.545078, -81.377196);
            var mapOptions = {
                zoom: 15,
                center: cord,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var marker = new google.maps.Marker({
                position: cord,
                map: map,
                title: 'Test'
            });
        }).error(function(jqXHR, textStatus, errorThrown) {
            $detailWin.text(textStatus);
        });
    }

    $detailWin = $("#detailWin").dialog({
        autoOpen: false,
        modal: true,
        width: 700,
        height: 600,
        show: "fade",
        close: "fade",
        open: getDialogContent
    });

    $("#cc").on('click', function() {
        $detailWin.dialog("open");
    });
});

注意事项：

确保 p2.php 提供包含地图画布的 HTML 片段，但没有 <head> 或 <body> 标记，并且绝对没有 javascript。
上面的代码一次性初始化对话框（包括地图）。如果您想在每次打开对话框时重新加载对话框（或它的某些方面，例如一组新的标记），情况会略有不同。

【讨论】：

【解决方案2】：

查看 Nemikor 的这篇博文，它应该可以满足您的需求。

http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

基本上，在调用“打开”之前，您首先从另一个页面“加载”内容。

jQuery('#dialog').load('path to my page').dialog('open');

Source

【讨论】：

我尝试像那样加载它，但它正在做同样的事情。对话窗口中只是一个空白页。谢谢！

【解决方案3】：

如果你的页面这么简单，可以考虑使用纯 JS 生成它。如果没有，如果您必须使用load 函数，请将您的JS 脚本放在您的页面2 正文中并使用$.load("page2.php body")

P.S：考虑使用 JS 生成地图而不是使用加载。这也将允许您将代码包装在代码库的简洁插件中，而不是重复代码。

【讨论】：

页面最终没有那么简单。还有很多事情要做，但我试图让这个问题保持简单。所以我不认为我可以在纯 JS 中做到这一切。我还尝试将 JS 脚本移动到正文并像这样加载它 - `$.load("page2.php body")' 但它没有做任何事情。对话框中也只是一个空白页。谢谢！
页面有多空白？请记住，您需要在正文中移动 ALL 脚本标签。这包括谷歌地图 API 加载器。
在对话框中它只是一个完全空白的页面。我可以使用 firebug 来查看 page2 正在加载，当我查看响应时，我会看到所有 JS 代码。我不知道如何使这项工作。感谢您的帮助。
“完全空白页” - 你的 div 和你的两个脚本标签是否在你的对话框中？
另外，如果是，按什么顺序排列。您是否在控制台上收到任何 JS 错误？