Question

我正在尝试通过点击从隐藏的div中提取地图的链接，将Google地图显示到彩色框弹出窗口中。我正在使用inner html颜色框http://www.jacklmoore.com/colorbox/example1/的概念将地图从隐藏的div <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 map_canvas未被隐藏时，地图会完美地加载到隐藏的div和colorbox窗口中。

我必须为我的应用程序使用所有代码块，但应该从隐藏的div中正确加载地图。

有什么想法吗？

顺便说一下，我正在使用google api v-3

Answer 1

也许您需要在彩盒的onComplete上初始化地图。

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

                          });

并在脚本中删除此行：

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

但每次打开彩盒时都会重新加载地图

彩色框的内联内容未显示

1 个答案: