Google Maps dans un jquery chargé dynamiquement Accordion

Question

J'essaie de charger une carte google dans un accordéon jquery ui avec un contenu chargé par ajax.

$("h2", "#accordion").click(function(e) { 
    var contentDiv = $(this).next("div"); 
    if (contentDiv.children().length == 1) 
    { 
    contentDiv.load($(this).find("a").attr("href")); 
    contentDiv.ready(function(){ 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    }) 
    } 
}); 

C'est mon code actuel (API Google Maps V3), mais il redirige vers l'url de href quand je clique actuellement, évidemment sans carte Google parce qu'il n'y a pas de javascript dans cette réponse. Si je commente la ligne de la carte tout fonctionne bien (sauf la carte elle-même).

Answer 1

Cela ne m'est pas arrivé jusqu'à maintenant, mais comme le contenu de chaque accordéon est chargé dynamiquement, cela constitue une requête cross site illégale. La carte doit être obtenue à partir de mon propre serveur web et transmise à la requête ajax dans l'accordéon ou la carte google doit être chargée une fois et manipulée dans la dom des volets d'accordéon en cours de chargement.

Answer 2

Eh bien, le fil est mort mais depuis que j'ai perdu quelques heures sur un problème similaire, j'ai envie de partager ma solution. J'ai un jqueryui accordéon avec un googlemap dans chaque volet. Le problème est que l'accordéon n'a pas de taille pour les volets cachés, et googlemaps utilise cette taille pour rendre les cartes. Donc je sauvegarde chaque 'map' et 'marker' (terminologie gmaps) dans un tableau indexé (var maps) et quand l'utilisateur change de volet accordéon, je 'rafraîchis' le gmap correspondant. L'attraper là est que le redimensionnement de l'événement n'est pas suffisant, vous devez forcer le zoom pour redessiner et même alors en raison de la taille qu'il avait sur un volet fermé, votre marqueur pour cette carte est complètement hors écran alors vous l'avez recentré basé sur le position du marqueur.

$(document).ready(function(){ 
    if($('div.map_canvas').length>0) initializeMap(); //init map 
    if($('#accordion').length>0) $("#accordion .items").accordion(); //init accordeon 

    $("#accordion .items").bind("accordionchange", function(event, Element) { 
     current=maps[Element.options.active]; 
     google.maps.event.trigger(current.map, 'resize'); //resize 
     current.map.setZoom(current.map.getZoom());  //force redrawn 
     current.map.setCenter(current.marker.getPosition()); //recenter on marker 
    }) 
}); 

var maps=Array(); 
function initializeMap() { 
     var geocoder; 
     $('div.map_canvas').each(function(index,Element) { 
     var address = $(Element).text(); 
     var myOptions = { 
      zoom: 15, 
      navigationControl: true, 
      navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, 
      mapTypeControl: true, 
      mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
      scaleControl: true, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       myOptions.center = results[0].geometry.location; 
       map = new google.maps.Map(Element, myOptions); 
       marker = new google.maps.Marker({ 
        map: map, 
        position: results[0].geometry.location, 
       }); 
       maps.push({marker:marker,map:map}); //save those 
      } else { 
       alert('The address could not be found for the following reason: ' + status); 
      } 
     }); 
    }) 
}