Download google maps apis maps if necessary? jquery.getScript ()?

Question

Hey guys, I am using a google map with full api maps on my website. The map is visible and used only after clicking on a specific link (for example, "Show map"). Since these api maps are a rather large js file, I want to download api only when necessary, and not to load the page, as if I'm doing it right now.

right now i have it in my

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAnf9W..." type="text/javascript"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

I am using jQuery and I have a separate script.js file where I store all my javascript.

The map I only displays when I click the following item:

 $('#googleMap').live('click', function(e) { 

Is it possible to use jquery getScript () to load the above scripts only by clicking this link? Or at least load it with "onLoad ()" and not with "onDomReady"?

Answer 1

First of all, you do not need to include both of these scenarios. You only need:

 <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 

Secondly, you can use the google loader (see the "Dynamic loading" section) to launch maps when the user asks for them, for example this:

 $("#foo").click(function() { google.load("maps", "3", {other_params:'sensor=false', callback: function(){ alert('maps API loaded!'); var map; // do stuff with your map }); });