Load Google Map through JQuery Load? - javascript

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.

Related

Google map taking more time to load

I'm using Google map in my website to show marker and to draw marker I also use an extra JS markerwithlabel.js.
To initialize map what have I done
google.maps.event.addDomListener(window, 'load', mapInitFunction);
it working fine when I don't use third party resources.
For my business purpose I have to load some third party JS, images etc, sometimes one of these resources get loading. Because request status show pending. Consequently Google map not load. Since I have initialize map in window load. I read Google Doc but didn't get any
alternative way to initialize Google map without window load.
Any of your suggestion will be appreciated.
Use callback function method and put it at the end of body
<script src="https://maps.googleapis.com/maps/api/js?key=**YOUR_KEY**&callback=mapInitFunction" async defer></script>
You can use without async defer attributes as well. It just provides a way of lazy loading the google maps

Get progress of script tag evaluation?

I have a large javascript from a webpack build being loaded as such:
<script src="application.bundle.js"></script>
I want to add a progress bar while the script loads. In chrome dev tools timeline, I can see that most of the load time is spent here: "Evaluate Script", understandably so. Is there any way to get progress or at the very least a done event to know when the script is done evaluating?
I could do something in the application script like window.appLoaded = true and look for that periodically. Is there a way to do this without modifying the application script?
If you want a callback after the file is loaded, I suggest you load it asynchronously with a function call that uses a callback function upon completion.
You could put up a progress spinner before calling the loader function, with the callback taking it down. Something like this:
function myLoadScript( ) {
showMyProgress();
loadScript( 'application.bundle.js', hideMyProgress );
}
This page shows a few ways to load scripts asynchronously. A generic loadScript() function is shown there.

loading a js file asynchronously from a js file that loads asynchronously

I had a javascript file(initial.js) on the page inserted through the script tag like so:
<script src="initial.js"></script>
This file creates dom elements(let say two links) and also loads another jQuery plugin(plugin.js) asynchronously via jQuery ajax method. Clicking on those two links brings up a module from the jQuery plugin(plugin.js).
The javascript file(initial.js) was then modified to load asynchronously on the page via jQuery ajax instead of via script tag. This has resulted in some events not getting attached to the links intermittently and this results in the plugin not being called.
I believe the browser is loading the async scripts in its own order and hence the links fail to launch the plugin intermittently. Any pointers to resolve this issue with this new set up?
At a high-level, I think you need to look into something like require.js. Alternatively, you could look into some jQuery event handling code which allows you to listen on load events of calls which may help you determine when one script loaded before loading the next one.
You have probably tried something like this in the past:
var output;
$.get('data.php',function(data){
output=data;
});
alert(output);
You will get an undefined error because Javascript doesn't wait around for the AJAX call to be returned before moving onto the next code.
Same thing goes for scripts. If you place multiple calls to multiple scripts, you will probably get the smallest one returned the quickest, and that script executed. If you load a script that is 10kb and then one that is 1kb, the 1kb script will probably return the quickest and then be executed even though it was called after the 10kb script.
To correct this, you could make a queue system and then only load each script after the previous has loaded:
var scripts=['script1.js','script2.js','script3.js'];
$(document).ready(function(){
loadScript();
});
function loadScript(){
if(sendQueue.length==0)
return;
$.getScript(scripts[0],function(){
scripts=scripts.slice(1);
loadScript();
});
}
But if you are loading scripts from within scripts from within scripts... very Inception like, then this still may not work.

Load javascript within a google map info window HTML content

I would like to load a javascript script within a google map info window HTML content but, for reasons I don't understand, the script is not loaded.
I generate my infowindow like that :
var info_window = new google.maps.InfoWindow({"content":"<script type=\"text\/javascript\" src=\"\/path\/to\/js\"><\/script>"});
I precise that the javascript path has been tested.
Is it possible to load javascript script like that? If yes, what's wrong ?
Are you using jQuery?
If so, you could add the script anywhere else in the document besides the infowindow and use .ajaxComplete() to target some script to the infowindow after the ajax call has finished.
http://api.jquery.com/ajaxComplete/

Question about when a script is executed after appending it

In my code, I have javascript that dynamically adds another script to the page:
created_script=document.createElement('script');
created_script.src='other_script';
created_script.type='text/javascript';
document.head.appendChild(created_script);
in this 'other script', I have a function called reloader().
The problem I'm having is that right after I dynamically add the script, I try to call the function reloader(), but I'm getting a reloader is not defined error.
Here's is like what I am doing:
created_script=document.createElement('script');
created_script.src='other_script';
created_script.type='text/javascript';
document.head.appendChild(created_script);
reloader();
Can someone explain to me why this doesn't work and how should I fix this so that reloader() can be called after appending the script in a single dynamic call (if possible at all)?
Loading scripts like this happens asynchronously. This means that at the time you call reloader(), the external script may still be loading.
Your script shouldn't invoke loader() until it knows that the external script has completely loaded. See this related question: How can I delay running some JS code until ALL of my asynchronous JS files downloaded?

Categories

Resources