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>

私の問題は、カラーボックスに Google マップが読み込まれないことです。この問題にどのように取り組むことができるかについて、誰かが洞察を与えることができることを望んでいました。

ここに私が作成した JSFilddle があります: http://jsfiddle.net/xLGyQ/1/

どうもありがとう、WD

4

1 に答える 1

0

カラーボックスなしで物事を機能させようとしましたか？カラーボックスが使用されているかどうかに関係なく機能しないようです：http：//jsfiddle.net/em6Rz/

于 2012-07-10T21:30:43.337 に答える