Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can do this. You can add a callback function name in the url. It'll be called when the API gets loaded. That callback function must be accessible in the document's scope.</p> <p>I did that some time ago by triggering a custom event on the window with jQuery: <a href="http://jsfiddle.net/fZqqW/5/" rel="noreferrer">http://jsfiddle.net/fZqqW/5/</a></p> <p>used "<a href="http://maps.google.com/maps/api/js?sensor=false&amp;callback=gMapsCallback" rel="noreferrer">http://maps.google.com/maps/api/js?sensor=false&amp;callback=gMapsCallback</a>"</p> <pre><code>window.gMapsCallback = function(){ $(window).trigger('gMapsLoaded'); } $(document).ready((function(){ function initialize(){ var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); } function loadGoogleMaps(){ var script_tag = document.createElement('script'); script_tag.setAttribute("type","text/javascript"); script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&amp;callback=gMapsCallback"); (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); } $(window).bind('gMapsLoaded', initialize); loadGoogleMaps(); })());​ </code></pre> <blockquote> <p>Asynchronously Loading the API</p> <p>You may wish to load the Maps API JavaScript code after your page has finished loading, or on demand. To do so, you can inject your own tag in response to a window.onload event or a function call, but you need to additionally instruct the Maps JavaScript API bootstrap to delay execution of your application code until the Maps JavaScript API code is fully loaded. You may do so using the callback parameter, which takes as an argument the function to execute upon completing loading the API.</p> <p>The following code instructs the application to load the Maps API after the page has fully loaded (using window.onload) and write the Maps JavaScript API into a tag within the page. Additionally, we instruct the API to only execute the initialize() function after the API has fully loaded by passing callback=initialize to the Maps</p> </blockquote> <p>See HERE : <a href="https://developers.google.com/maps/documentation/javascript/tutorial" rel="noreferrer">https://developers.google.com/maps/documentation/javascript/tutorial</a></p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload