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

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.