WML: add several JSONs as markers with InfoWindow

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

WML: add several JSONs as markers with InfoWindow

Manuel Meyer-5
I use jQuery to get a list of JSON objects to display them as markers.
This works as expected, but I try to attach a listener with a function  
for displaying an InfoWindow for each of them.
but this leads to the situation, that clicking on any marker will open  
the InfoWindow for the last marker.
What is the right way to do it proper?

Thanks, Manuel

here you'll find the code:
http://dpaste.com/19071/
_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WML: add several JSONs as markers with InfoWindow

Vladimir Agafonkin
Manuel,

Try this: http://dpaste.com/19155/

You've been caught by the famous JavaScript closure trick. Consider the following code:

for (var i = 0; i < 5; i++) {
   links[i].onclick = function() {
      alert(i);
   }
}

All alerts will always output 5. This is hard to explain, but basically that's because the onclick handlers in this example get the 'i' variable into their scope, and the variable continues to exist after the loop has been executed. Inside all the handlers "i" points to the same variable, and it equals 5 by the time the handler is executed.

The easiest way to fix this is to put the body of the loop into another function (closure) that makes a local copy of the i variable for each handler:

for (var i = 0; i < 5; i++) {
   (function(i) {
      links[i].onclick = function() {
         alert(i);
      }
   })(i);
}

This is a complex issue to understand, - if this seems unclear, just use the code I pasted at the beginning. Hope this helps.

On Wed, Mar 25, 2009 at 9:25 PM, Manuel Meyer <[hidden email]> wrote:
I use jQuery to get a list of JSON objects to display them as markers.
This works as expected, but I try to attach a listener with a function
for displaying an InfoWindow for each of them.
but this leads to the situation, that clicking on any marker will open
the InfoWindow for the last marker.
What is the right way to do it proper?

Thanks, Manuel

here you'll find the code:
http://dpaste.com/19071/
_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev



--
Vladimir Agafonkin
Front-End Architect, CloudMade
+380 93 745 44 61

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WML: add several JSONs as markers with InfoWindow

Vladimir Agafonkin
In reply to this post by Manuel Meyer-5
By the way,

A more convenient way to attach an info window to a marker is to use the CM.Marker::bindInfoWindow method. It attaches an info window to click and also ensures it closes on a second click, moreover this way you wont have to deal with closures:

http://dpaste.com/19167/

On Wed, Mar 25, 2009 at 9:25 PM, Manuel Meyer <[hidden email]> wrote:
I use jQuery to get a list of JSON objects to display them as markers.
This works as expected, but I try to attach a listener with a function
for displaying an InfoWindow for each of them.
but this leads to the situation, that clicking on any marker will open
the InfoWindow for the last marker.
What is the right way to do it proper?

Thanks, Manuel

here you'll find the code:
http://dpaste.com/19071/
_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev



--
Vladimir Agafonkin
Front-End Architect, CloudMade
+380 93 745 44 61

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: WML: add several JSONs as markers with InfoWindow

Manuel Meyer-5
In reply to this post by Vladimir Agafonkin
At least it is famous :D

Thanks to ur help, now everything works as i want
* json added as markers
* InfoWindows for each of them
        * in normal Browser
        * and iPhone
I used both of ur suggestions:
CM.Marker::bindInfoWindow for click events and (funktion(i){...}}(i)  
to get it working under iPhone with additional ontouchstart-events.
If anyone likes to see the code – here it is:

http://dpaste.com/hold/19242/

> Manuel,
>
> Try this: http://dpaste.com/19155/
>
> You've been caught by the famous JavaScript closure trick. Consider  
> the following code:
>
> for (var i = 0; i < 5; i++) {
>    links[i].onclick = function() {
>       alert(i);
>    }
> }
>
> All alerts will always output 5. This is hard to explain, but  
> basically that's because the onclick handlers in this example get  
> the 'i' variable into their scope, and the variable continues to  
> exist after the loop has been executed. Inside all the handlers "i"  
> points to the same variable, and it equals 5 by the time the handler  
> is executed.
>
> The easiest way to fix this is to put the body of the loop into  
> another function (closure) that makes a local copy of the i variable  
> for each handler:
>
> for (var i = 0; i < 5; i++) {
>    (function(i) {
>       links[i].onclick = function() {
>          alert(i);
>       }
>    })(i);
> }
>
> This is a complex issue to understand, - if this seems unclear, just  
> use the code I pasted at the beginning. Hope this helps.
>
> On Wed, Mar 25, 2009 at 9:25 PM, Manuel Meyer <[hidden email]
> > wrote:
> I use jQuery to get a list of JSON objects to display them as markers.
> This works as expected, but I try to attach a listener with a function
> for displaying an InfoWindow for each of them.
> but this leads to the situation, that clicking on any marker will open
> the InfoWindow for the last marker.
> What is the right way to do it proper?
>
> Thanks, Manuel
>
> here you'll find the code:
> http://dpaste.com/19071/
> _______________________________________________
> Dev site list
> [hidden email]
> http://lists.cloudmade.com/listinfo/dev
>
>
>
> --
> Vladimir Agafonkin
> Front-End Architect, CloudMade
> +380 93 745 44 61

_______________________________________________
Dev site list
[hidden email]
http://lists.cloudmade.com/listinfo/dev