2

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 ページに含めると、機能しません。インクルードされたページにすべての and タグを含めたくないことに気付きました。ダイアログウィンドウにマップをロードできないため、さまざまな方法で試してみました。

jQuery を使用してマップ API の URL をロードしようとしましたが、役に立ち$.getScript()ません。

誰かがこれを機能させるための最良の方法を見つけるのを手伝ってくれるなら、私は立ち往生しているので大歓迎です。

ありがとう！

アップデート：

私はそれを次のように動作させることになりました（これは2番目のページ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>
4

3 に答える 3

2

ここには 2 つの重要な考慮事項があります。

  • すべての 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が map-canvas を含む HTML フラグメントを配信することを確認しますが、<head>または<body>タグはなく、JavaScript は絶対に配信しません。
  • 上記のコードは、ダイアログ (マップを含む) の 1 回限りの初期化を実行します。ダイアログを開くたびにダイアログ (または新しいマーカー セットなどの一部の側面) を再読み込みする場合は、少し異なります。
于 2013-05-14T19:49:24.903 に答える