Get an onclick function on a google maps marker array

Question

I have a question. I've been searching for a way to get an onclick function on a marker. This marker is made by a Position array. But it seems it doesn't make the onclick function and if it does it only works on the last made marker.

Please can you help me ?

This is the array

var POIArrayVisited = new Array(
    new Array(52.3764, 4.90245, "De Schreierstoren", "POIone"),
    new Array(52.3727, 4.90036, "De Waag", "POItwo"),
    new Array(52.3737, 4.90012, "Het Zustersklooster", "POIthree"), 
    new Array(52.3750, 4.89939, "Onze lieve heer op solder", "POIfour"), 
    new Array(52.3741, 4.89808, "Belle het standbeeld", "POIfive"));

then I create the marker:

// voer de coordinaten van de niet bezochte poi in
// zet markers voor elk POI

var i = 0;
for (i = 0; i < POIArrayVisited.length; i++) {
    var markerLatlng = new google.maps.LatLng(
                    POIArrayVisited[i][0], POIArrayVisited[i][1])
    // Place a hit marker
    markerVisited = new google.maps.Marker({
        position: markerLatlng,
        map: map,
        icon: imageMarkerOld,
        title: POIArrayVisited[i][2]
    });
}

and then it will create the onclick marker.

// For every POI
var i;
for (i = 0; i < POIArrayVisited.length; i++) {
    var POIlinkVisited = POIArrayVisited[i][3];
    var OpenPOI = POIlinkVisited;
    google.maps.event.addListener(markerVisited, "click", function() {
        //link and update cookie
        document.cookie = "OpenPOI" + "=" + OpenPOI;
        window.location.href = "poi.php";
    });

}

I don't get what I'm doing wrong

Jeffrey Bouva · Accepted Answer · 2011-10-11 11:06:56Z

If you want to use an array and use a link or ID to define what is needs to open on a other page you can use this First get you array with

Lat and Long Then a title and the ID of value you want to use.

    var POIArrayVisited = new Array(        new Array(52.3764, 4.90245, "De Schreierstoren", "POIone"),
                                            new Array(52.3727, 4.90036, "De Waag", "POItwo"),
                                            new Array(52.3737, 4.90012, "Het Zustersklooster", "POIthree"),
                                            new Array(52.3750, 4.89939, "Onze lieve heer op solder", "POIfour"),
                                            new Array(52.3741, 4.89808, "Belle het standbeeld", "POIfive")
);

This way you can use this code to make a cookie

// voer de coordinaten van de niet bezochte poi in
                // zet markers voor elk POI
                var i=0;
                for (i=0;i<POIArrayVisited.length;i++) {
                    var markerLatlng = new google.maps.LatLng(POIArrayVisited[i][0],POIArrayVisited[i][1])
                    // Place a hit marker
                    markerVisited = new google.maps.Marker({
                        position:  markerLatlng,
                        map: map,
                        icon: imageMarkerOld,
                        title: POIArrayVisited[i][2],
                        html: POIArrayVisited[i][3]
                    });
                    var OpenPOIVisited = POIArrayVisited[i][3];
                        google.maps.event.addListener(markerVisited, "click", function() {
                            //link and update cookie
                            document.cookie = "OpenPOI"+"="+this.html;
                            window.location.href = "poi.php";
                    });
                }

and with this you can use it as an ID for php

                    // voer de coordinaten van de niet bezochte poi in
                // zet markers voor elk POI
                var i=0;
                for (i=0;i<POIArrayVisited.length;i++) {
                    var markerLatlng = new google.maps.LatLng(POIArrayVisited[i][0],POIArrayVisited[i][1])
                    // Place a hit marker
                    markerVisited = new google.maps.Marker({
                        position:  markerLatlng,
                        map: map,
                        icon: imageMarkerOld,
                        title: POIArrayVisited[i][2],
                        html: POIArrayVisited[i][3]
                    });
                    var OpenPOIVisited = POIArrayVisited[i][3];
                        google.maps.event.addListener(markerVisited, "click", function() {
                            //link and update cookie
                            window.location.href = "poi.php?id="+this.html;
                    });
                }

OR is you want to refer to a html page

                // voer de coordinaten van de niet bezochte poi in
                // zet markers voor elk POI
                var i=0;
                for (i=0;i<POIArrayVisited.length;i++) {
                    var markerLatlng = new google.maps.LatLng(POIArrayVisited[i][0],POIArrayVisited[i][1])
                    // Place a hit marker
                    markerVisited = new google.maps.Marker({
                        position:  markerLatlng,
                        map: map,
                        icon: imageMarkerOld,
                        title: POIArrayVisited[i][2],
                        html: POIArrayVisited[i][3]
                    });
                    var OpenPOIVisited = POIArrayVisited[i][3];
                        google.maps.event.addListener(markerVisited, "click", function() {
                            //link and update cookie
                            window.location.href = +this.html".html";
                    });

Thanks for a the help guys !! =D

Jules · Accepted Answer · 2011-10-10 17:58:32Z

0

In your code:

// For every POI
var i;
for (i = 0; i < POIArrayVisited.length; i++) {
    var POIlinkVisited = POIArrayVisited[i][3];
    var OpenPOI = POIlinkVisited;
    google.maps.event.addListener(markerVisited, "click", function() {
        //link and update cookie
        document.cookie = "OpenPOI" + "=" + OpenPOI;
        window.location.href = "poi.php";
    });

}

Where do you get a new instance of markerVisited? As far as I can see in the code snippets you posted you are cycling through the POIArrayVisited but you are not obtaining a new instance of the markerVisited. So that's probably the reason only the LAST marker actually responds on the click.

Should be something similar to:

for (var i = 0; i < POIArrayVisited.length; i++) {
    var markerLatlng = new google.maps.LatLng(POIArrayVisited[i][0], POIArrayVisited[i][1]);
    // Place a hit marker
    var markerVisited = new google.maps.Marker({
        position: markerLatlng,
        map: map,
        icon: imageMarkerOld,
        title: POIArrayVisited[i][2]
    });

    google.maps.event.addListener(markerVisited, "click", function() {
            //link and update cookie
            document.cookie = "OpenPOI" + "=" + OpenPOI;
            window.location.href = "poi.php";
        });

}

answered Oct 10, 2011 at 17:58

Jules

7,2236 gold badges28 silver badges51 bronze badges

2 Comments

Jeffrey Bouva Over a year ago

Thank you so so much for your answere I have only one problem left. The var OpenPOI looks something like this ' var OpenPOIVisited = POIArrayVisited[i][3]; ' But now it will always set the last var in the array as cookie and not like ' title: POIArrayVisited[i][2]' for each array the title So why doesn't it work for a var but is does in a new google.maps.marker How can i fix this ?

Jules Over a year ago

I'm not 100% sure if I understand your question, but you cannot set custom object as cookie values. You can only store primitive data such as Strings or Integers. So if you want to store an object (OpenPoi in your case) you should store all of its values independently and reconstruct the variable when fetching the cookie.

Collectives™ on Stack Overflow

Get an onclick function on a google maps marker array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related