2010-10-19 4 views
1

J'ai une adresse et une petite icône de carte et lorsque l'utilisateur clique sur l'icône, il charge Fancybox avec les données gMaps.Chargement des données gMaps dans Fancybox

Maintenant, j'ai d'abord essayé de voir comment je pourrais avoir mon

<div id="map"></div> charge dans le modal Fancybox. Après avoir essayé comme toujours de comprendre cela avec l'option API jamais disponible à partir de Fancybox.net j'ai abandonné et est allé de la manière codée en dur.

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

De cette façon, lorsque l'utilisateur clique sur l'icône de carte js crée la div qui est ensuite chargé avec les données gmaps qui est ensuite chargé dans Fancybox ... (thats une bouche pleine)

2 choses, 1 quand je clique sur l'icône rien ne se passe. Je dois double-cliquer ou effectuer deux clics pour charger la Fancybox. 2ème fancybox charge la carte mais elle charge 75% de la carte et le reste semble gris. J'ai alors compris que pour une raison quelconque la carte est en train d'être chargée mais avec un décalage de gauche: -200px top: -75px ou quelque chose comme ça.

Existe-t-il un moyen plus efficace de le faire?

vous pouvez voir mon exemple à www.helixagent.com connexion est test/mot de passe pour accéder aux contacts de test Contactez

+0

connexion ne fonctionne pas pour moi. nom d'utilisateur: texte, mot de passe: mot de passe. – Keyo

+0

désolé c'était test pas de texte, j'ai réédité le post – Eli

+0

J'ai réussi à me connecter mais il n'y a rien sur le site ... une autre question. Quelle version de Google Maps Api utilisez-vous? Ou utilisez-vous un plugin drupal gmap? – Michal

Répondre

0

pas de solution trouvée, mais je suis passé à utiliser Color Box à la place

Questions connexes