Get an onclick function on a google maps marker array
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
docu开发者_如何学编程ment.cookie = "OpenPOI" + "=" + OpenPOI;
window.location.href = "poi.php";
});
}
I don't get what I'm doing wrong
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
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";
});
}
精彩评论