loading gMaps data into Fancybox
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;开发者_JAVA百科"><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 www.helixagent.com login is test/password go to contacts for Test Contact
no solution found, but i switched to use Color Box instead
精彩评论