Where in the flow of execution does the initialize() function need to appear in the code to allow a Google Map v3 API map to be loaded through a JQuery .load() call.
The code I have at the moment looks like this
$('#maplink').click(function(){
$('.fades').fadeOut('slow');
$('#googleMap').show();
$('#googleMap').load("map.html");
initialize();
});`
However, this isn't initializing the map after the AJAX call.
Any help would be appreciated :)
This is a very old question, but for anyone who ends up here, loading a .html page into a div is not the right way to dynamically load a Maps API map. Here's how it should be done:
First, put all of your Maps API script in the host page - the page that has the #googleMap div. Or, if you want that script itself in a file that you load asynchronously, put it in a .js file and load it with $.getScript().
Then, if you want to load both the Maps API and the map asynchronously in response to your button click, use the code from this asynchronous Maps API example.
In that example page, you won't be using this line:
window.onload = loadScript;
Instead, you'll call the loadScript() function from your click handler:
$('#maplink').click(function(){
$('.fades').fadeOut('slow');
$('#googleMap').show();
loadScript();
});
where loadScript() is the Maps API loading function from the example.
In fact, you could use $.getScript() to load the Maps API - just give it the URL used in the loadScript() sample function. That loadScript() function is pretty much equivalent to $.getScript() except for the hard coded URL.
You'll also need to change things in the initialize() function in that example to match your page, of course.
I'm not very good with jQuery, but I'm not really sure why you want jQuery to load the map. If you are trying to make the map load asynchronously google provides a way https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API Other than that. I can't be much help. Sorry
The initialize() call to google maps can be added as a script inside map.html and then when jquery includes the html it will execute the javascript.
Alternatively, you could do the following
$('#googleMap').load("map.html",function(){
alert('map is loaded and ready');
});
The issue that you are having is that the load call is asynchronous and therefore, when initialize() is called your ajax load probably has not completed.
