Google Maps/Javascript issue with map 'undefined'

Question

Hi there,

Hope someone can fix this (hopefully simple) issue I'm having.

We've got a Google Map pulling in Geo-Coded data from a web service, which returns an array of results.

Also, it geocodes the UK post code of the user and plots a yellow 'home' marker on their location on the map.

This works fine in IE, but the marker does not display in Safari or Firefox.

In the Firefox error console we get back 'map is undefined'. I've narrowed it down to the line, but can't find a way of fixing this issue as of yet.

~Note my code is not streamlined yet, so there maybe some unnecessary js code in there in places. But I'd like to be able to to Beta test this with our users shortly.~

Link to the service....

http://www.stratford.gov.uk/labs/nhs/

Enter CV37 6HX as a test postcode, and choose from any of the radio button options before searching.

Cheers!

Simon

Answer 1

When I analyze the error in IE7, I see that the map variable is undefined when you get the callback which triggers localSearch2.setSearchCompleteCallback.

You should check that the function loadMap() which initializes the map completed successfully before starting the search. I see that you initialize it with

google.setOnLoadCallback(loadMap);

This will only load the map on "load" event. It appears that your callback is triggered too soon, before the map is initialized: you trigger the search when you call

newMarker2(UserPostcode, UserIcon);

This is done during the execution, before the loadMap function gets triggered by the "load" event.

Answer 2

The best way to see what is happening here is by putting a breakpoint on line 31 and line 153 in firebug. That way you will see that "map.addOverlay(usermarker);" is called before map is initialised in line 31.

You've got quite some code under the "/// Map the user location, by geocoding their Post Code" comment line that is not inside a function. Code that is not executed by some kind of onload callback can be executed at any time by the browser (usually, but not always, once the whole javascript tag is loaded). That is why you see inconsistent behavior in different browsers. In the worst case it might even be inconsistent from reload to reload.

To fix this, you should put this code in a function and call it like you do it for the loadMap function ("google.setOnLoadCallback(loadMap);") or simply call it from within the loadMap function.

Hope this helps.