/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Event

Hello,

I’m currently working on an application which is supposed to show points of interest in an 5mile radius. Everything went fine so far, but right now I have a problem with defining different eventlisteners inside of a for-loop. The thing is that only the last item in the loop is regarded as eventlisteners are static. What I want to do is create a new eventlistener each round.

[CODE]
var latlngArray = new Array();
latlngArray[0] = new google.maps.LatLng(51.433421334114136, 6.780710220336914);
latlngArray[0][0] = “POI1”;
latlngArray[0][1] = “Adresse1”;
latlngArray[1] = new google.maps.LatLng(51.42914042327276, 6.746034622192383);
latlngArray[1][0] = “POI2”;
latlngArray[1][1] = “Adresse2”;

for (var i=0; i < latlngArray.length; i++) {
var d = google.maps.geometry.spherical.computeDistanceBetween(latlng,latlngArray[0]);
if (d < circle.radius) {
var tempMarker = (function(p) {
return new google.maps.Marker({map: map, position: latlngArray[i], title:latlngArray[i][0]});
})(i);

var info = (function(p) {
return new google.maps.InfoWindow({content: latlngArray[i][1]});
})(i);

var onClickInfo = (function(p) {
return new google.maps.event.addListener(tempMarker, ‘click’, function(){
info.open(map, tempMarker);
});
})(i);
};
};
[/CODE]

Unfortunately my english is pretty bad, but I’m pretty sure you guys get what I want to do. ^^

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@snap85authorJul 15.2011 — Ok, I by now I got one problem solved. The Infowindow appears now above all markers, even though its still the same content.

[CODE]
google.maps.event.addListener(tempMarker, 'click', function(){
info.open(map, [B]this[/B]);
});
[/CODE]
Copy linkTweet thisAlerts:
@jamesbcox1980Jul 15.2011 — Looks like you're passing a ByVal variable to the event handler rather than a ByRef variable. You defined tempMarker as a variable above the scope of the function, so you're trying to reapply it each time through the loop, overwriting it each time.

What you want to do is enclose the whole section in an anonymous function (I think... been a while):

[CODE] var latlngArray = new Array(), i, d;
latlngArray[0] = new google.maps.LatLng(51.433421334114136, 6.780710220336914);
latlngArray[0][0] = "POI1";
latlngArray[0][1] = "Adresse1";
latlngArray[1] = new google.maps.LatLng(51.42914042327276, 6.746034622192383);
latlngArray[1][0] = "POI2";
latlngArray[1][1] = "Adresse2";


for (i = 0; i < latlngArray.length; i++) {
d = google.maps.geometry.spherical.computeDistanceBetween(latlng,latlngArray[0]);
if (d < circle.radius) {
(function() {
var tempMarker, info, onClickInfo;
tempMarker = (function() {
return new google.maps.Marker({map: map, position: latlngArray[i], title:latlngArray[i][0]});
})();

info = (function() {
return new google.maps.InfoWindow({content: latlngArray[i][1]});
})();

onClickInfo = (function() {
return new google.maps.event.addListener(tempMarker, 'click', function(){
info.open(map, tempMarker);
});
})();
})();
};
};[/CODE]


This causes the tempMarker variable to reside inside a function, giving it a lower scope, so that it is deleted from memory each time. Just need to keep an eye on scope. There's no need to re-parameterize the "i" counter each function, it will still be used correctly.
×

Success!

Help @snap85 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...