Question

I have an address and a little map icon and when the user clicks on the icon it loads up Fancybox with the gMaps data in it.

Now, at first I tried to see how I could have my

<div id="map"></div> load into the Fancybox modal.

After trying like for ever to figure this out with ever API option available to me from Fancybox.net I gave up and went the hard coded way.

$('#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;
 });

This way, when the user clicks on the map icon the js creates the div that is then loaded with the gMaps data which is then loaded into Fancybox… (thats a mouth full)

2 things, 1 when I click on the icon nothing happens. I need to double click or perform two click to get the Fancybox to load. 2nd fancybox does load the map but it loads like 75% of the map and the rest looks grey. I then figured out that for some reason the map is being loaded but with an offset of left: -200px top: -75px or something like that.

Is there a more efficient way of doing this?

you can see my example at http://www.helixagent.com login is test/password go to contacts for Test Contact

Answer 1

no solution found, but i switched to use Color Box instead