I am using a google map with the full maps api on my website. The map is only visible and used once a specific link (e.g. Show Map) is clicked. Since this maps api is a rather large js file I want to load the api only when it's needed and not on page load like i'm doing it right now.
Right now I have this in my <head>:
<script src=";amp;v=2&sensor=true&key=ABQIAAAAnf9W..." type="text/javascript"></script>
<script type="text/javascript" src=";></script>
I am using jQuery and I have a seperate script.js file where I store all my javascript.
The map I only shown when I click the following item:
$('#googleMap').live('click', function(e) {
Is it possible to use jquery getScript() to load the above scripts only when this link is clicked? Or at least load it "onLoad()" and not "onDomReady"?
I am using a google map with the full maps api on my website. The map is only visible and used once a specific link (e.g. Show Map) is clicked. Since this maps api is a rather large js file I want to load the api only when it's needed and not on page load like i'm doing it right now.
Right now I have this in my <head>:
<script src="http://maps.google./maps?file=api&v=2&sensor=true&key=ABQIAAAAnf9W..." type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google./maps/api/js?sensor=false"></script>
I am using jQuery and I have a seperate script.js file where I store all my javascript.
The map I only shown when I click the following item:
$('#googleMap').live('click', function(e) {
Is it possible to use jquery getScript() to load the above scripts only when this link is clicked? Or at least load it "onLoad()" and not "onDomReady"?
Share Improve this question edited Dec 2, 2020 at 10:57 peterh 1 asked Apr 1, 2011 at 16:53 mattmatt 44.5k107 gold badges268 silver badges402 bronze badges 1- Yes you can do this, could you post a brief example of your maps activation code? – Josiah Ruddell Commented Apr 1, 2011 at 16:59
1 Answer
Reset to default 10First of all, you don't need to include both of those scripts. You only need:
<script src="http://maps.google./maps/api/js?sensor=false" type="text/javascript"></script>
Secondly, you can use the google loader (see the "Dynamic Loading" section) to fire up maps when the user requests it, like 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
});
});