将 gMaps 数据加载到 Fancybox

Question

我有一个地址和一个小地图图标，当用户单击该图标时，它会加载带有 gMaps 数据的 Fancybox。

现在，一开始我想看看如何才能拥有我的

<div id="map"></div> 加载到 Fancybox 模式中。

在尝试使用 Fancybox.net 提供给我的任何 API 选项来解决这个问题后，我放弃了，采用了硬编码方式。

$('#details a#map-home').live('click', function(){
  var name    = $('#details').find('#dFname').text();
  var address = $('#details').find('.address').text();
  var city    = $('#details').find('.city').text();
  var state   = $('#details').find('.state').text();
  var zip     = $('#details').find('.zip').text();
  var hmap    = address + ', ' + city + state + zip;
  var tmap    = hmap.replace(' ', '+');
  $('#details').append('<div style="display: none;"><div id="hmap" style="width: 600px; height: 450px;"></div></div>');

  $('a#map-home').fancybox({
   'titlePosition'   : 'outside',
   'title' : 'This is where ' + name + ' lives',
   //'transitionIn'   : 'none',
   //'transitionOut'   : 'none',
   'modal'              : false,
   'autoScale'          : true,
   'autoDimensions'     : true,
   'centerOnScroll'     : true,
   'hideOnOverlayClick' : false,
   //'overlayOpacity'     : 0.15
   'onStart' : hMap
   //'content' : hMap,
   //'href' : 'http://maps.google.com/maps?hl=en&ie=UTF8&hq=&hnear=' + tmap + '&t=h&z=18&iwloc=A&output=embed'
  });

  function hMap(){
   $('#hmap').gMap({
    markers: [{
     address: "\"" + hmap + "\"",
     html: "_address"
    }],
    address: "\"" + hmap + "\"",
    zoom: 18
   });
  }
  return false;
 });

这样，当用户点击地图图标时，js 会创建一个 div，然后加载 gMaps 数据，然后将其加载到 Fancybox...（嘴巴满满的）

2 件事，1 当我点击图标时没有任何反应。我需要双击或执行两次单击以加载 Fancybox。第二个fancybox确实加载了地图，但它加载了75%的地图，其余部分看起来是灰色的。然后我发现由于某种原因正在加载地图，但偏移量为 left: -200px top: -75px 或类似的东西。

有没有更有效的方法？

您可以在 www.helixagent.com 上查看我的示例登录名是测试/密码 go to contacts for Test Contact

Answer 1

没有找到解决方案，但我改用颜色框