[Google Maps API v3] Alternative to <body onload="initialize()"> for V3 map call ?
3,790 views
Skip to first unread message
JohnH
Apr 25, 2010, 4:08:10 PM4/25/10
to Google Maps JavaScript API v3
Hello,
From a javascript beginner... Does anyone know of alternative methods
of calling a V3 map other than by
<body onload="initialize()"> ?
I'm building a site that uses AJAX to load different content
depending on which tab is clicked, like this example:
http://www.barelyfitz.com/projects/tabber/example-ajax.html
When different tabs are clicked I want different maps to load. My
problem is that the *parent* page (example-ajax.html) contains the
<body> tag, but it's the the *child* pages that contain maps, eg
http://www.barelyfitz.com/projects/tabber/example-ajax-1.html
will hold the map call <div id="map" style="width:600; height:500">/
div> but it's got no <body> tag to fire onload="initialize()".
So, is there some way I can put everything necessary to call a map on
a child page which has no <html>, <head> or <body> tags to play with?
I've been reading this V2-only thread but I don't think it applies to
V3:
http://groups.google.com/group/google-maps-api/browse_thread/thread/8b3cc4ec9298c3f4/966b572e0a2d6279?lnk=gst&q=window+onload+cms#966b572e0a2d6279
Thanks!
John
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
From a javascript beginner... Does anyone know of alternative methods
of calling a V3 map other than by
<body onload="initialize()"> ?
I'm building a site that uses AJAX to load different content
depending on which tab is clicked, like this example:
http://www.barelyfitz.com/projects/tabber/example-ajax.html
When different tabs are clicked I want different maps to load. My
problem is that the *parent* page (example-ajax.html) contains the
<body> tag, but it's the the *child* pages that contain maps, eg
http://www.barelyfitz.com/projects/tabber/example-ajax-1.html
will hold the map call <div id="map" style="width:600; height:500">/
div> but it's got no <body> tag to fire onload="initialize()".
So, is there some way I can put everything necessary to call a map on
a child page which has no <html>, <head> or <body> tags to play with?
I've been reading this V2-only thread but I don't think it applies to
V3:
http://groups.google.com/group/google-maps-api/browse_thread/thread/8b3cc4ec9298c3f4/966b572e0a2d6279?lnk=gst&q=window+onload+cms#966b572e0a2d6279
Thanks!
John
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
julio cesar sanchez hernandez
Apr 26, 2010, 2:54:08 AM4/26/10
to Google Maps JavaScript API v3
You can try with an onClick method on the tabs
On 25 abr, 22:08, JohnH <johnhoar...@googlemail.com> wrote:
> Hello,
>
> From a javascript beginner... Does anyone know of alternative methods
> of calling a V3 map other than by
> <body onload="initialize()"> ?
> I'm building a site that uses AJAX to load different content
> depending on which tab is clicked, like this example:http://www.barelyfitz.com/projects/tabber/example-ajax.html
>
> When different tabs are clicked I want different maps to load. My
> problem is that the *parent* page (example-ajax.html) contains the
> <body> tag, but it's the the *child* pages that contain maps, eghttp://www.barelyfitz.com/projects/tabber/example-ajax-1.html
On 25 abr, 22:08, JohnH <johnhoar...@googlemail.com> wrote:
> Hello,
>
> From a javascript beginner... Does anyone know of alternative methods
> of calling a V3 map other than by
> <body onload="initialize()"> ?
> I'm building a site that uses AJAX to load different content
> depending on which tab is clicked, like this example:http://www.barelyfitz.com/projects/tabber/example-ajax.html
>
> When different tabs are clicked I want different maps to load. My
> problem is that the *parent* page (example-ajax.html) contains the
> will hold the map call <div id="map" style="width:600; height:500">/
> div> but it's got no <body> tag to fire onload="initialize()".
>
> So, is there some way I can put everything necessary to call a map on
> a child page which has no <html>, <head> or <body> tags to play with?
>
> I've been reading this V2-only thread but I don't think it applies to
> V3:http://groups.google.com/group/google-maps-api/browse_thread/thread/8...
> div> but it's got no <body> tag to fire onload="initialize()".
>
> So, is there some way I can put everything necessary to call a map on
> a child page which has no <html>, <head> or <body> tags to play with?
>
> I've been reading this V2-only thread but I don't think it applies to
JohnH
Apr 26, 2010, 5:01:18 AM4/26/10
to Google Maps JavaScript API v3
Actually I've figured it out...
An alternative to google's recommended V3 map-trigger <body
onload="initialize()"> is:
<script type="text/javascript">
window.onload = function() {
initialize();
}
</script>
John
On Apr 25, 9:08 pm, JohnH <johnhoar...@googlemail.com> wrote:
> Hello,
>
> From a javascript beginner... Does anyone know of alternative methods
> of calling a V3 map other than by
> <body onload="initialize()"> ?
> I'm building a site that uses AJAX to load different content
> depending on which tab is clicked, like this example:http://www.barelyfitz.com/projects/tabber/example-ajax.html
>
> When different tabs are clicked I want different maps to load. My
> problem is that the *parent* page (example-ajax.html) contains the
> <body> tag, but it's the the *child* pages that contain maps, eghttp://www.barelyfitz.com/projects/tabber/example-ajax-1.html
An alternative to google's recommended V3 map-trigger <body
onload="initialize()"> is:
<script type="text/javascript">
window.onload = function() {
initialize();
}
</script>
John
On Apr 25, 9:08 pm, JohnH <johnhoar...@googlemail.com> wrote:
> Hello,
>
> From a javascript beginner... Does anyone know of alternative methods
> of calling a V3 map other than by
> <body onload="initialize()"> ?
> I'm building a site that uses AJAX to load different content
> depending on which tab is clicked, like this example:http://www.barelyfitz.com/projects/tabber/example-ajax.html
>
> When different tabs are clicked I want different maps to load. My
> problem is that the *parent* page (example-ajax.html) contains the
> will hold the map call <div id="map" style="width:600; height:500">/
> div> but it's got no <body> tag to fire onload="initialize()".
>
> So, is there some way I can put everything necessary to call a map on
> a child page which has no <html>, <head> or <body> tags to play with?
>
> I've been reading this V2-only thread but I don't think it applies to
> V3:http://groups.google.com/group/google-maps-api/browse_thread/thread/8...
> div> but it's got no <body> tag to fire onload="initialize()".
>
> So, is there some way I can put everything necessary to call a map on
> a child page which has no <html>, <head> or <body> tags to play with?
>
> I've been reading this V2-only thread but I don't think it applies to
Esa
Apr 26, 2010, 3:23:11 PM4/26/10
to Google Maps JavaScript API v3
Using API event object is better
google.maps.event.addDomListener(window, "load", initialize);
It makes sure that you will not overwrite any other window.onload (or
body.onload) function calls.
google.maps.event.addDomListener(window, "load", initialize);
It makes sure that you will not overwrite any other window.onload (or
body.onload) function calls.
duffnut
Jun 1, 2010, 9:44:35 AM6/1/10
to Google Maps JavaScript API v3
Sorry Esa for the spam, I did not realise this was a google group,
will open my question to the community:
I am creating a website for my charity using wordpress and a CMS
theme, so the only way to edit the body tag is to edit the theme
files, and have the onload event in every page (I would have guessed
that was a bad thing, but if not, just let me know). It seems the
solution you suggest is better as I only need maps with markers on 1
or 2 pages. But I wouldn't know where to put the API object as my
scripting skills are limited to ctrl-c --> ctrl-v for the moment.
I would like to use Esa's solution, but being a complete novice, I do
not know where to place the object. could someone point out where
using the google tutorial as an example:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=set_to_true_or_false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Many Thanks
On Apr 26, 8:23 pm, Esa <esa.ilm...@gmail.com> wrote:
> Using API event object is better
>
> google.maps.event.addDomListener(window, "load", initialize);
>
> It makes sure that you will not overwrite any other window.onload (orbody.onload) function calls.
will open my question to the community:
I am creating a website for my charity using wordpress and a CMS
theme, so the only way to edit the body tag is to edit the theme
files, and have the onload event in every page (I would have guessed
that was a bad thing, but if not, just let me know). It seems the
solution you suggest is better as I only need maps with markers on 1
or 2 pages. But I wouldn't know where to put the API object as my
scripting skills are limited to ctrl-c --> ctrl-v for the moment.
I would like to use Esa's solution, but being a complete novice, I do
not know where to place the object. could someone point out where
using the google tutorial as an example:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=set_to_true_or_false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Many Thanks
On Apr 26, 8:23 pm, Esa <esa.ilm...@gmail.com> wrote:
> Using API event object is better
>
> google.maps.event.addDomListener(window, "load", initialize);
>
Miguel Angel Vilela
Jun 1, 2010, 9:49:51 AM6/1/10
to google-map...@googlegroups.com
When working with CMS or templates, the asynchronous load is usually a better fit:
Using the Google AJAX API Loader
You can use that code with 3[.x] versions and it Just Works.
Cheers,
Miguel
duffnut
Jun 1, 2010, 10:26:49 AM6/1/10
to Google Maps JavaScript API v3
Many thanks, that's much easier to get my head around! and it works
too :)
here's the google sample code for V3, notice the added
"{other_params:"sensor=false"}":
http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/commonloader.html
On Jun 1, 2:49 pm, Miguel Angel Vilela <mig...@google.com> wrote:
> When working with CMS or templates, the asynchronous load is usually a
> better fit:
>
> Using the Google AJAX API Loaderhttp://code.google.com/apis/maps/documentation/javascript/v2/basics.h...
> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > .
> > .
too :)
here's the google sample code for V3, notice the added
"{other_params:"sensor=false"}":
http://gmaps-samples-v3.googlecode.com/svn/trunk/commonloader/commonloader.html
On Jun 1, 2:49 pm, Miguel Angel Vilela <mig...@google.com> wrote:
> When working with CMS or templates, the asynchronous load is usually a
> better fit:
>
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > groups.google.com/group/google-maps-js-api-v3?hl=en.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > To post to this group, send email to
> > google-map...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2B unsub...@googlegroups.com>
> > You received this message because you are subscribed to the Google Groups
> > "Google Maps JavaScript API v3" group.
> > To post to this group, send email to
> > google-map...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > .
Reply all
Reply to author
Forward
0 new messages