link to url from marker click - mutiple markers

[Mothermugger]

The goal is simple each marker on the map will have a different URL to link to when clicked
The information is in the array ==> sites[] 

... code fragment

 function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
var image ='pin_60percent.png';         
 var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[5],
                html:   sites[0],
                icon: image
              
            });
        
            google.maps.event.addListener(marker, "click", function () {     <======= here is where the maker gets it's URL
       window.open(sites[3],"_self");
            });
etc....   

The problem is of course that ALL OF THE MAKERS have the same URL link

How do I fix the correct URL to each maker when clicked?
I saw a post about this but was unable to gleam how to change my code to make it work.

I will keep working on this but in the mean time I am making this post for help!

Thanks!

[Rossko]

> The problem is of course that ALL OF THE MAKERS have the same URL link

Search this group for using javascript closures e.g. a createMarker
function or similar, example
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/55c28a5b8647b747/baef074f407ef015

[Mothermugger]

When you do this with an info window

you use the key word 'this' as in...

            google.maps.event.addListener(marker, "click", function () {
      

                infowindow.setContent(this.html);
                infowindow.open(map, this)
                infowindow.zIndex(1);
            });
   
so the infowindows content is attached to the pin being created at that moment in the loop

I was looking for something like that for the simple function of a URL link.

[Mothermugger]

Rossko

So thanks for the links - but they all are showing how to accomplish poping up the correct info window for each marker.

My example above is from my last project that does just that and it works great.

Still looking for a solution to

adding a URL link to mutiple markers where each marker has a unique URL ....

[Rossko]

> So thanks for the links - but they all are showing how to accomplish poping
> up the correct info window for each marker.

Yes. Don't you think its exactly the same problem at the root, that
you are using something left pointing at the last one in the loop,
instead of capturing the value you want? Don't you think the same
solution will apply? Why not try it?

If you don't like that, why not try a version of the solution you
already used for infowindows. You created a property .html for each
marker (I guess) and recovered it in the click handler using
'this.html' What is stopping you creating some property .myTargetUrl
and recovering it in the same way?

[Andrew Leach]

On Mar 16, 4:30 pm, Mothermugger <ivan.of.the.oza...@gmail.com> wrote:
>
> so the infowindows content is attached to the pin being created at that
> moment in the loop

Actually, the infoWindow's content is BROUGHT FROM the pin being
created. "this" refers to the marker, and "this.html" is its html
property. When the marker's click event is fired, you get that
property's value from the marker, and set the content of the
infoWindow.

With this code,

google.maps.event.addListener(marker, "click", function ()
{

window.open(sites[3],"_self");
});

when the marker's click event is fired, you open the window with
whatever sites[3] contains at that time. It's not related to the
marker.

> I was looking for something like that for the simple function of a URL link.

Do something similar. Your html property is already a custom property,
so simply add another one -- although it's probably best to use
something which Google won't use later on --

var marker = new google.maps.Marker({

html: sites[0],
myURL: sites[3],
...
});

and then use it where you need it:

google.maps.event.addListener(marker, "click", function ()
{

window.open(this.myURL,"_self");
});
which finds the myURL property of the marker, and then uses that to
open the window.

Actually I'm rather surprised it's that easy to add and use custom
properties. Using the markerOptions object to do so is undocumented,
it appears, and it might break.

[bratliff]

On Mar 16, 4:52 pm, Andrew Leach <andrew.leac...@gmail.com> wrote:

> Actually I'm rather surprised it's that easy to add and use custom
> properties. Using the markerOptions object to do so is undocumented,
> it appears, and it might break.

It is just a property of the "this" object which is available to the
event listener. Microsoft has invented a silly name for it like
"expando"

I believe the documentation is providing bad advice. I believe people
have to be educated.

"Functions closures" are an incredably BAD IDEA. Each marker requires
a distinct "function clusure". Each must be parsed, "pseudo-compiled"
& have separate space allocated for it. Each has its own unique stack
frame containing local variables. The code is identical but since it
is produced at run-time, it cannot be shared. It has to be
replicated. One local variable might be different for each duplicate
copy of the "function closure" but everything else is redundant.

Using a common function with a unique value assigned to each instance
is an improvement but it is still too much redundancy. For every
marker, the application must execute the
"google.maps.events.addEventListener" method. It consumes cycles &
wastes space. All event listeners point to the same function. For a
few dozen markers, who cares ? For hundreds or thousands of similar
markers, it is very wasteful.

I am trying to encourage Google to depreciate their event listener
model. It could be replaced with a single common function shared by a
group of similar markers. The same could be done for redundant styles
(color / opacity / shape).

If you check out:

http://www.polylib.us/polycluster/airports

you will see approximately 14,000 similar markers sharing just two
event listeners, one for "click", another for "mousemove". You will
also notice it is trivial to deal with multiple overlapping markers.
With Google's event listener model, the common function must be called
once per marker with a different "this" argument. In the "airports"
demo, the event listeners are called once with an array containing all
marker names. The array is in LIFO order to preserve zIndex.
Array[0] is always the element with top priority.

[Pil]

On Mar 16, 7:10 pm, bratliff <bratl...@umich.edu> wrote:

> "Functions closures" are an incredably BAD IDEA.

I completely agree with you. Function closures should be avoided
whenever possible, I think you explained why they are inefficient,
especially when they are used en masse.

> I am trying to encourage Google to depreciate their event listener
> model.  

I'm convinced the API has many inefficient parts, so I completely
second your encouragement.

[Mothermugger]

Andrew:

Whatever the technical augments posted by Bratlif after your solution and even your own caveats that this is undocumented (which I can say, my own search came up empty)

It does work very nicely and I will be using it for this project.

To me that fact that it works in IE, firefox etc is enough.

Thank you for insightful and well written post on this subject.

Problem solved by Andrew.

[geoco...@gmail.com]

On Mar 16, 8:17 am, Mothermugger <ivan.of.the.oza...@gmail.com> wrote:
> The goal is simple each marker on the map will have a different URL to link
> to when clicked
> The information is in the array ==> sites[]  
>
> ... code fragment
>
>  function setMarkers(map, markers) {
>
>         for (var i = 0; i < markers.length; i++) {
> var image ='pin_60percent.png';          
>  var sites = markers[i];
>             var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
>             var marker = new google.maps.Marker({
>                 position: siteLatLng,
>                 map: map,
>                 title: sites[0],
>                 zIndex: sites[5],
>                 html:   sites[0],
>                 icon: image
>
>             });
>
>             google.maps.event.addListener(marker, "click", function () {    
> <======= here is where the maker gets it's URL
>        window.open(sites[3],"_self");
>             });
> etc....    
>
> The problem is of course that ALL OF THE MAKERS have the same URL link

Sounds like pitfall #3 from this page of Mike Williams' (v2) tutorial:
http://econym.org.uk/gmap/basic1.htm

-- Larry

[bratliff]

I appreciate the support.

For another API design flaw, look at:

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/0d246468fd84da83#

Also issue 3150:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=3150