1

非表示の div からマップを取得するリンクをクリックして、Google マップをカラーボックス ポップアップ ウィンドウに表示しようとしています。非表示の div からウィンドウにマップをロードするために、カラーボックスhttp://www.jacklmoore.com/colorbox/example1/inner htmlの概念を使用しています。<div id="map_canvas"></div>

コードのブロック全体は次のとおりです

<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=xyxyxyxyxyxyxyxyxyxyxyxyxyx&sensor=false"></script>


    <script type="text/javascript" language="javascript">
function initialize() 
{
    var cenLatlng = new google.maps.LatLng(/////////,///////////);
    var myOptions = {
                       zoom: 15,
                       center: cenLatlng,
                       mapTypeId: google.maps.MapTypeId.ROADMAP
                    }

    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

    var myLatlng = new google.maps.LatLng(/////////,////////////);
    var marker = new google.maps.Marker({
                                          position: myLatlng,
                                          map: map,
                                          title:"XXXXXXXXXXX"
                                       });

    var contentString =  '<div class="info"><img style="float:left;padding-right:10px;" src="/dummy.jpg"><b>YYYYYYYY</b> <br/>' +

             'ZZZZZZZZZZ <br />' +

             'AAAAAAAAA <br />' + 

             'Telephone: BBBBBBBBB</div>';

    var infowindow = new google.maps.InfoWindow({
                                                  content: contentString,
                                                  width:150,
                                                  height:90
                                               });

    infowindow.open(map,marker);

    // Start of newly added code block
    google.maps.event.addListener(marker, 'click', function() {
                                    infowindow.open(map,marker);
                                         });
    // End of newly added code block
}
    google.maps.event.addDomListener(window, 'load', initialize);
</script>


    <script>
            $(document).ready(function(){
            $(".inline").colorbox({
                                  inline:true,  
                                  scroll:false


                                  });

        });
    </script>

 <div id="map_canvas" style=width:700px; height:500px; display:none;></div>

<p><a class='inline' href="#map_canvas">Display map in colorbox</a></p>

問題は、マップが非表示の div からロードされたときにマップがまったく表示されないことです。一方、div が非表示でない場合、マップは非表示の div とカラーボックス ウィンドウの両方に完全に読み込まmap_canvasれます。

アプリケーションのコードのすべてのブロックを使用する必要がありますが、マップは非表示の div から適切にロードする必要があります。

何か案が？

ちなみに、私はGoogle API v-3を使用しています

4

2 に答える 2

1

インライン コンテンツを使用する場合、ターゲット コンテンツ ( がhref参照する要素) を非表示にしないでください。代わりに、次のように非表示の別の div でコンテンツ (非表示) を囲みます。

<div style="display:none">
    <div id="map_canvas" style="width:700px; height:500px"></div>
</div>
于 2012-09-19T00:13:20.533 に答える
0

カラーボックスの onComplete でマップを初期化する必要があるかもしれません。

    $(".inline").colorbox({
                          inline:true,  
                          scroll:false
                          onComplete: function(){
                              initialize();
                          }

                          });

スクリプトで次の行を削除します。

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

ただし、カラーボックスを開くたびにマップがリロードされます

于 2012-09-17T17:41:45.340 に答える