jQuery - Load/Inject a remote pages DIV and jQuery Script

Question

The Scenario

Using jQuery, I have a page that has a popup overlay containing locations marked using Google Maps.

The overlay works using 2 pages setup as follows:

• The main page opens an overlay via a text link to a map. The complete map page is then loaded into the overlay.
• The map page itself contains Google's API and initialization code to load the correct map.

As they are, the overlay and map work fine providing I load the whole map page.

The Problem

My problem is, I don't want to load the complete page, I want to load just the particular div holding the map.

I'm using jQuerys Ajax "load" function, (as follows) to load the complete map page.

wrap.load(this.attr("href"))

If I try to change this to load a particular DIV (as follows), the pages DIV content is loaded correctly, except the Google API is not loaded, meaning the map does not display.

wrap.load(this.attr("href")+" #map_wrap")

I have tried including Googles API and initialization code on the first main page that opens the overlay, however, this still doesn't work.

I've also tried embedding the code within the loaded DIV, again, no luck.

The Question

Is there a way to load the map pages API script along with the DIV?

Answer 1

After rearranging the page coding, I solved the problem.

I included the Google Maps API code into the main page that opens the overlay, then when the overlay is opened, I needed to call the Google Map initialize() function.

Problem solved.

Answer 2

Just for the sake of completeness (if it's not too clear for others from your answer), is worth mentioning that it wasn't working because by just calling the DIV element, the necessary Javascript statements (which were outside the scope of that element) weren't being started nor called.

To solve it, you could have started them before using your load method or, as you did, as the general invocation of JS files.