Google在jQuery对话框窗口中映射JavaScript API_Javascript_Jquery_Google Maps

Google在jQuery对话框窗口中映射JavaScript API

javascript jquery google-maps

Google在jQuery对话框窗口中映射JavaScript API,javascript,jquery,google-maps,Javascript,Jquery,Google Maps,我使用谷歌地图JavaScript API来显示地图- 我需要的API中有一些静态映射没有的特性因此，此页面作为独立页面运行良好： <!DOCTYPE html> <html> <head> <title>Map</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">

我使用谷歌地图JavaScript API来显示地图-

我需要的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>

如果页面简单，请考虑使用纯JS生成它。如果没有，如果您有使用加载功能，请将JS脚本放在page2的正文中，并使用$.load（“page2.php正文”）

S：考虑使用JS来生成映射而不是使用加载。这还允许您将代码封装在一个整洁的代码库插件中，而无需重复代码。

请查看Nemikor的这篇博文，它可以满足您的需要

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

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

这里有两个重要的注意事项：-

确保所有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片段，但没有
或
标记，而且绝对没有javascript
上面的代码执行对话框（包括映射）的一次性初始化。如果每次打开对话框时都要重新加载对话框（或对话框的某些方面，如一组新的标记），则会略有不同

您选择的浏览器调试器中有错误消息吗？没有，几乎每次尝试都会得到一个空白页面，Firebug不会显示错误。非常感谢这一页没有那么简单。还有很多事情要做，但我试图让问题简单化。所以我不认为我可以在纯JS中完成这一切。我还尝试将JS脚本移动到主体中，并像这样加载-`$.load（“page2.php主体”）”，但它没有做任何事情。对话框中只有一个空白页。谢谢这页有多空白？请记住，您需要移动正文中的所有脚本标记。这包括谷歌地图API加载器。在对话框中，它只是一个完全空白的页面。我可以使用firebug查看page2正在加载，当我查看响应时，我会看到所有的JS代码。我不知道该怎么做。谢谢你的帮助。“完全空白的页面”-你的div和你的两个脚本标签在你的对话框中的某个地方吗？还有，如果是，它们的顺序是什么。你在控制台上有JS错误吗？我试着像那样加载它，但它也在做同样的事情。对话框窗口中只有一个空白页。谢谢

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

$(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");
    });
});