/    Sign up×
Community /Pin to ProfileBookmark

Function call with google maps api

Here’s my issue. I have a function created that listens for a click on a link in the sidebar, and when that click happens, it does some stuff with the Google map I have. Problem is the function is firing when I click on one of the links and I can’t for the life of me figure out why.

Here’s the site where I found the code:
[url]http://econym.googlepages.com/basic2.htm[/url]

And here’s the site where I’m using the code where you can see the problem:
[url]http://bellevue.com/restaurant.php[/url]

Here’s the javascript I’m using:

[CODE]window.onload = load;
var map;
var gmarkers = [];

// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], “click”);
alert(booyah);
}

//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = “”;

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var i = 0;

// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
// add a line to the side_bar html
side_bar_html += ‘<a href=”javascript:myclick(‘ + i + ‘)”>’ + name + ‘</a><br>’;
i++;
return marker;
}

// create the map
var map = new GMap2(document.getElementById(“map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 43.907787,-79.359741), 8);

// add the points
var point = new GLatLng(43.65654,-79.90138);
var marker = createMarker(point,”This place”,”Some stuff to display in the<br>First Info Window”)
map.addOverlay(marker);

var point = new GLatLng(43.91892,-78.89231);
var marker = createMarker(point,”That place”,”Some stuff to display in the<br>Second Info Window”)
map.addOverlay(marker);

var point = new GLatLng(43.82589,-78.89231);
var marker = createMarker(point,”The other place”,”Some stuff to display in the<br>Third Info Window”)
map.addOverlay(marker);

// put the assembled side_bar_html contents into the side_bar div
document.getElementById(“side_bar”).innerHTML = side_bar_html;
}
//]]>

}
[/CODE]

Much thanks for any help!

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@FangSep 10.2008 — Error: topsClickTrack is not defined
Source file: http://bellevue.com/restaurant.php
Line: 102
Copy linkTweet thisAlerts:
@bejitto101authorSep 10.2008 — Fixed that, but now I have a new error:

Firebug's log limit has been reached. %S entries not shown. Preferences

a is undefined

Dh()main.js (line 245)

I()main.js (line 248)

myclick(2)restaurant.js (line 8)

javascript:myclick(2)()()javascri...yclick(2) (line 1)

[Break on this error] function Dh(a,b){var c=[],d=a.__e_;if(d)...d[b])}else ja(d,function(e,f){hd(c,f)});
Copy linkTweet thisAlerts:
@FangSep 11.2008 — "a is undefined" indicates you have made an error in building the map, usually an order of loading.

Go back to the basic map, make sure it loads without error.

Start adding map features, checking each time for errors.
Copy linkTweet thisAlerts:
@bejitto101authorSep 11.2008 — Okay, well I've gone through everything again. It seems the only thing that messes up is the myclick(i) function. Its exactly like in the example, and the example does work.

Is there any chance you could look at the example and then tell me where I screwed up? Much thanks!

Edit: would it have something to do with being an onload event? Could that mess with the GEvent?
Copy linkTweet thisAlerts:
@konithomimoSep 11.2008 — You may be trying to use multiple onload events. To use multiple onload events you must call them using the same call. This means you cannot use window.onload with the body onload. To call multiple onload functions you can do either of the following:

window.onload=function(){
function1();
function2()
function3();
return;
}


or

&lt;body onload="function1(); function2(); function3();"&gt;

You cannot have:
&lt;body onload="function1();" onload="function2();" onload="function3();"&gt;

or

window.onload = function1;
window.onload = function2;
window.onload - function3;
Copy linkTweet thisAlerts:
@bejitto101authorSep 11.2008 — Alright, so trying what you said, I removed the other js files so there is only the restaurant.js that handles the map. So there is only one onload event and that calls the load() function.

Unfortunately I'm still having the same problem with the "a is undefined"

Any other ideas?
Copy linkTweet thisAlerts:
@shrewd_houndSep 11.2008 — In your call to the google maps change V=2 to V=2.123 or V=2.122

<script src="http://maps.google.com/maps?file=api&amp;v=2....

to

<script src="http://maps.google.com/maps?file=api&amp;v=2.123....
Copy linkTweet thisAlerts:
@konithomimoSep 11.2008 — You have gmarkers[] declared twice. When you assign a value to gmarkers[] in the load function you are setting it to the local gmarkers[] in the load function, and not the global gmarkers[]. This causes the global gmarkers[] to be empty. Then when you use the myclick function you are trying to access the global gmarker (which is empty), so gmarkers[i] is null, thus when it tries to call GEvent.trigger() the first arguement is not defined, thus the google JS throws the error. To fix this remove the line in red:



window.onload = load;
var map;
var gmarkers = [];


// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
alert(booyah);
}

<i> </i>//&lt;![CDATA[
function load() {
if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";

<i> </i> // arrays to hold copies of the markers and html used by the side_bar
<i> </i> // because the function closure trick doesnt work there
<i> </i> [color=red]var gmarkers = [];[/color]
<i> </i> var i = 0;


<i> </i> // A function to create the marker and set up the event window
<i> </i> function createMarker(point,name,html) {
<i> </i> var marker = new GMarker(point);
<i> </i> GEvent.addListener(marker, "click", function() {
<i> </i> marker.openInfoWindowHtml(html);
<i> </i> });
<i> </i> // save the info we need to use later for the side_bar
<i> </i> gmarkers[i] = marker;
<i> </i> // add a line to the side_bar html
<i> </i> side_bar_html += '&lt;a href="javascript:myclick(' + i + ')"&gt;' + name + '&lt;/a&gt;&lt;br&gt;';
<i> </i> i++;
<i> </i> return marker;
<i> </i> }

<i> </i> // create the map
<i> </i> var map = new GMap2(document.getElementById("map"));
<i> </i> map.addControl(new GLargeMapControl());
<i> </i> map.addControl(new GMapTypeControl());
<i> </i> map.setCenter(new GLatLng( 43.907787,-79.359741), 8);

<i> </i> // add the points
<i> </i> var point = new GLatLng(43.65654,-79.90138);
<i> </i> var marker = createMarker(point,"This place","Some stuff to display in the&lt;br&gt;First Info Window")
<i> </i> map.addOverlay(marker);

<i> </i> var point = new GLatLng(43.91892,-78.89231);
<i> </i> var marker = createMarker(point,"That place","Some stuff to display in the&lt;br&gt;Second Info Window")
<i> </i> map.addOverlay(marker);

<i> </i> var point = new GLatLng(43.82589,-78.89231);
<i> </i> var marker = createMarker(point,"The other place","Some stuff to display in the&lt;br&gt;Third Info Window")
<i> </i> map.addOverlay(marker);


<i> </i> // put the assembled side_bar_html contents into the side_bar div
<i> </i> document.getElementById("side_bar").innerHTML = side_bar_html;
}
//]]&gt;

}
Much thanks for any help!
Copy linkTweet thisAlerts:
@bejitto101authorSep 11.2008 — shrewd_hound: Much thanks, but that didn't work either. What was it supposed to do in any case?

konithomimo: Awesome! That did it, thank you very much for your help, makes a lot of sense, d'oh.
Copy linkTweet thisAlerts:
@shrewd_houndSep 11.2008 — A lot of people were having issues with it a while back. It typically cleared up when they called the latest version... V=2.123


http://groups.google.com.au/group/Google-Maps-API/browse_thread/thread/50cb854726eef11e
Copy linkTweet thisAlerts:
@konithomimoSep 11.2008 — konithomimo: Awesome! That did it, thank you very much for your help, makes a lot of sense, d'oh.[/QUOTE]

No problem. Once I saw that the error was form the Goggle end I knew that you were trying to send a null/non-existent value/variable.
×

Success!

Help @bejitto101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...