Google Maps within a dynamically loaded jquery Accordion

Posted by marr75 on Stack Overflow See other posts from Stack Overflow or by marr75
Published on 2010-05-14T17:09:02Z Indexed on 2010/05/14 17:14 UTC
Read the original article Hit count: 351

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).

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jquery-ui