Forum Moderators: open

Message Too Old, No Replies

Event handlers and google map

         

quartzy

10:14 pm on Apr 10, 2009 (gmt 0)

10+ Year Member



I want to link to my map externally, but whenever I do this, it will not work. I am not sure on how to call the function in the body, ie what event handler to use. Can anyone help? I am new to all this.

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(removed), 13);
map.setUIToDefault();
var marker = new GMarker(new GLatLng(removed));
map.addOverlay(marker);}
GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml("<p>Removed</p>");
}
)
}

When I link to it externally, I add to the bottom of the script.
onload="initialize()" onunload="GUnload()"
all I then get is an error message that I have omitted an ; but I cant see where. Any help appreciated. As the address of the info window goes on to two lines, wonder if the script wants a semi-colon because of that.

rocknbil

1:12 am on Apr 11, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I am not sure on how to call the function in the body, ie what event handler to use.

I think a little more code is required to debug your missing colon; are you using FireFox? The Error Control Panel should be able to help that.

As for the first problem, in the head of your external script, add a window.onload function like


window.onload=function () {
if (document.getElementById('map_canvas')) { initialize(); }
};
window.onunload = function() {
if (document.getElementById(map_canvas')) { GUnload(); }
};

This attaches the behavior on page load, insuring all libraries are loaded, and there's no need to put clunky Javascript directly in the document.

In both cases, "if (documentGetElementById...." allows you to put this in a global JS file so any other pages referencing the file that do not contain the map won't kick errors at onload.

blang

1:33 am on Apr 11, 2009 (gmt 0)

10+ Year Member




GEvent.addListener(marker, "click", function(){
marker.openInfoWindowHtml("<p>Removed</p>");
});

There's a missing semicolon right there.

rocknbil has a good idea, using the onload and onunload events and checking the dom state before you try to load the map object. Usually the examples only show the onunload handler inline with the opening BODY tag. Something else you should consider, pushing all the JavaScript down to the bottom of your document body, and then all the DOM has been loaded at that point, so the window.onload handler is unnecessary. Checking for the element as rocknbil has shown is just a really good idea anyway, though.

What I typically do is something like this:


var mapContainer= document.getElementById("map");
if ( mapContainer && GBrowserIsCompatible() ) {
// load the map
}

A couple of map coding tips:

1) Declare map in the global scope, i.e. outside your initialize() function. This way you can call it from anywhere in the script, i.e. inside other functions that handle events, etc.

2) Rather than instantiate multiple GLatLng point objects, assign the point object to a var and use that in your setCenter and marker calls.

quartzy

3:56 pm on Apr 11, 2009 (gmt 0)

10+ Year Member



window.onload=function () {
if (document.getElementById('map_canvas')) { initialize(); }
};
window.onunload = function() {
if (document.getElementById(map_canvas')) { GUnload(); }
};

This code worked, thank you very much, you mentioned there was a semi colon missing but I still cant see where it is missing in the script. But thanks for this, saved me hours of working on it.