javascript - 未显示颜色框的内联内容

Question

我正在尝试通过单击从隐藏的 div 中拉出 map 的链接，将 google map 显示到 colorbox 弹出窗口中。我正在使用 inner html彩盒的概念http://www.jacklmoore.com/colorbox/example1/用于从隐藏的 div 加载 map <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>

问题是 map 从隐藏的 div 加载时根本不显示。另一方面，当 div map_canvas 时， map 被完美地加载到隐藏的 div 和 colorbox 窗口中。没有隐藏。

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

有什么想法吗？

顺便说一下，我使用的是 google api v-3

Answer 1

使用内联内容时，您不希望隐藏目标内容(href 所指的元素)。相反，将内容(未隐藏)包含在另一个隐藏的 div 中，如下所示:

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