homepage Welcome to WebmasterWorld Guest from 184.73.104.82
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Making Google Map load when requested, not automatically
ocon

5+ Year Member



 
Msg#: 4482929 posted 1:49 pm on Aug 8, 2012 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4482929 posted 2:30 pm on Aug 8, 2012 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4482929 posted 2:36 pm on Aug 8, 2012 (gmt 0)

I don't think you can load the Google API asynchronously. Look at the code here:
https://maps.googleapis.com/maps/api/js?sensor=false
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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4482929 posted 5:45 pm on Aug 8, 2012 (gmt 0)

There's a jQuery interface to google maps:

[code.google.com...]

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4482929 posted 6:27 pm on Aug 8, 2012 (gmt 0)

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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4482929 posted 7:59 pm on Aug 8, 2012 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4482929 posted 8:41 pm on Aug 8, 2012 (gmt 0)

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

5+ Year Member



 
Msg#: 4482929 posted 2:50 am on Aug 9, 2012 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved