Making Google Map load when requested, not automatically

[ocon]

I'm making a mobile friendly page that uses bandwidth very efficiently.

I have a Google Map on the page that is sometimes needed and sometimes not. I'm trying to prevent the map from loading automatically and only when activated.

This is the old working script where the map automatically loads:

head:

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

body:

<div style="width:100px;height:100px" id="map"></div>
<script type="text/javascript">
<!--
var map = new google.maps.Map(document.getElementById("map"), {zoom:5, center:new google.maps.LatLng(0,0)});
-->
</script>

This is the code I'm working on to only load the map when requested. It's currently not working:

head:

<script type="text/javascript">
<!--
function loadmap(){
var mapjs = document.createElement("script");
mapjs.src = "http://maps.googleapis.com/maps/api/js?sensor=false";
mapjs.onload = mapjs.onreadystatechange = function(){
var map = new google.maps.Map(document.getElementById("map"), {zoom:5, center:new google.maps.LatLng(0,0)});}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(mapjs, s);}
-->
</script>

body:

<div style="width:100px;height:100px" id="map"><span onclick="loadmap();">Activate Map</span></div>

I'm getting a "Uncaught TypeError: undefined is not a function" error.

[daveVk]

try inserting mapjs into document

var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(mapjs, s);}

prior to using it, as in

var map = new google.maps.Map(document.getElementById("map"), {zoom:5, center:new google.maps.LatLng(0,0)});}

[Fotiman]

I don't think you can load the Google API asynchronously. Look at the code here:
[maps.googleapis.com...]
Their script does this:

getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/9/13/main.js");

And their getScript function is using document.write. Insert *facepalm* here.

Unfortunate.

Perhaps instead you could try something like including an iframe that contains the map API code, but you create the iframe with your onclick handler?

[swa66]

There's a jQuery interface to google maps:

[code.google.com...]

[Fotiman]

That doesn't help. That's just another thing that sits on top of the Google API (which is still doing a document.write). And for the purpose of making the page bandwidth friendly, that will have the opposite effect.

[swa66]

I'm not sure about the document.write or not.
Anyway, they have no need to have code in the body of the document as far as I can tell all javascript can be contain in the header. (they reference a DOM element by ID to use as "canvas" in their constructor).
e.g.:http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map


But if you use the jQuery, sure you have to load the javascript libraries (apprently 4 K long - not that bad IMHO) but as long as you do not call the contructor, there is no need to transfer the maps themselves - which are the large images that come in slowly in my experience...

Anyway: I've never tried to use it myself, ws in my bookmarks as something to look into deeper when I've the time ...

[Fotiman]

Perhaps I didn't express it clearly.

From what I can tell, the original post was trying to create a mobile friendly (light on bandwidth) page that did not load the map by default. I also took the post to mean (and I may have been wrong) that the script files should also not be loaded until they were needed. It's quite possible that my assumption was wrong, but that's how I interpreted it.

If that part about not including the script was an incorrect assumption, then the solution to the problem becomes so much easier that I think it's probably not what the original post was going for. It doesn't require loading an additional jQuery script either. Instead, the original code would remain, and only this part would change:

<script type="text/javascript">
<!--
var map = new google.maps.Map(document.getElementById("map"), {zoom:5, center:new google.maps.LatLng(0,0)});
-->
</script> 

And it could change to something like this:

<script type="text/javascript">
function loadmap() {
  var map = new google.maps.Map(document.getElementById("map"), {zoom:5, center:new google.maps.LatLng(0,0)});
|
</script> 

And then just using this as the onclick handler:
onclick="loadmap();"

In other words, not calling the constructor until it's requested.

However, as I stated above, that solution is so simple that I don't think it's what the original post was trying to achieve.
@ocon, correct me if I'm wrong. :)

[ocon]

Thank you everyone for your feedback. Fotiman, you were correct with what I was trying to do but it looks like it won't be possible.

Now I'm weighing the options between using iframes or just biting the bullet and loading the script but only calling the constructor until it's requested.