Google Maps within a dynamically loaded jquery Accordion - ajax

Question

I'm trying to load a google map within a jquery ui accordion with contents loaded by 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);
})
}
});
That's my current code (Google Maps API V3), but it redirects to the url of the href when I click currently, obviously with no google map because there's no javascript in this response. If I comment out the map line everything works fine (except the map itself).

Answer 1

Well, the thread is dead but since I lost some hours on similar problem I feel like sharing my solution.
I have a jqueryui accordeon with a googlemap in each pane.
The problem is accordeon have no size for hidden panes, and googlemaps uses that size to render the maps.
So I save every 'map' and 'marker' (gmaps terminology) in an indexed array (var maps) and when user changes accordeon pane, I 'refresh' the corresponding gmap.
The catch there is that event resize is not enough, you have to force zoom for redrawn and even then because of the size it had on a closed pane, your marker for that map is completelly off screen so you have recenter it based on the marker position.
$(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);
}
});
})
}

Answer 2

It didn't occur to me until now, but since the content of each accordion is dynamically loaded, this constitutes an illegal cross site request. The map must be obtained from my own web server and transmitted to the ajax request in the accordion or the google map must be loaded once and manipulated into the dom of the accordion panes being loaded.