1

我希望有一个人可以帮助我。

单击链接时，我想使用Colorbox.js动态加载 Google 地图。因此，除非用户决定查看更大的地图，否则不需要预加载地图。

我的 HTML 测试如下所示

<!DOCTYPE html>
<html>
  <head>
    <title>Map</title>
  </head>
  <body>
    <a href="#googlemap" id="launch_map">Check out park on Google Maps</a>
    <div id="location">
      <div class="map"></div>
    </div>


  <!-- Google Maps API -->
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>


  <!-- Colorbox Ajax Request -->
  <script type="text/javascript">

    $("#launch_map").colorbox({
      inline: true,
      width:300,
      height:200,
      html:$("#location").html()
    });

    var googleMap = $("#cboxLoadedContent").find("div.map")[0];
    var latlng = new google.maps.LatLng(44.537266, 123.250760);
    var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(googleMap, myOptions);
  </script>

  </body>
</html>

我的问题是它没有在 Colorbox 中加载 Google 地图。我希望有人可以就如何解决这个问题提供一些见解。

这是我创建的 JSFilddle：http: //jsfiddle.net/xLGyQ/1/

非常感谢，WD

4

1 回答 1

0

您是否尝试过在没有彩盒的情况下让事情正常工作？无论是否使用颜色框，它似乎都不起作用：http: //jsfiddle.net/em6Rz/

于 2012-07-10T21:30:43.337 回答