Question

我有一个地址和一个小地图图标，当用户点击该图标时，它会加载Fancybox，其中包含gMaps数据。

现在，起初我试图了解如何拥有自己的

<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％的地图，其余的看起来是灰色的。然后我发现由于某种原因，地图正在被加载，但偏移量为左：-200px top：-75px或类似的东西。

有更有效的方法吗？

你可以在www.helixagent.com看到我的例子登录是测试/密码转到测试联系人的联系人

Answer 1

找不到解决方案，但我转而使用Color Box

将gMaps数据加载到Fancybox中

1 个答案: