I have a map with multiple markers. Everything works fine, but I can't set the links for each marker with click function. It's always the same value. (p.s. I'm using the gmap3 plugin) My link information is into json like a .link.link.
$('#search-map-btn').on('click', function () {
$.ajax({
url: "/",
data: $('#dir-search-form').serializeArray(),
type: "POST",
context: document.body
}).done(function (json) {
var mapDiv = $("#map-container");
mapDiv.gmap3({
clear: {}
});
for (key in json) {
var lon = json[key].coords.lon;
var lat = json[key].coords.lat;
var link = json[key].link.link;
//all map parameters
mapDiv = jQuery("#map-container");
mapDiv.height(390).gmap3({
map: {
options: {
"draggable": false,
"mapTypeControl": true,
"mapTypeId": google.maps.MapTypeId.ROADMAP,
"scrollwheel": true,
"panControl": true,
"rotateControl": true,
"scaleControl": true,
"streetViewControl": true,
"zoomControl": true,
"center": [56.9475, 24.106944],
"zoom": 8
}
},
marker: {
values: [{
latLng: [lat, lon]
}],
options: {
"animation": google.maps.Animation.DROP,
"draggable": false,
"clickable": true,
"icon": "<?php bloginfo('template_directory'); ?>/images/new/gmap.marker.png",
},
events: {
click: function () {
document.location.href = json[key].link.link
}
},
},
});
}
});
});
$('#search-map-btn').on('click', function(){
$.ajax({
url: "/",
data: $('#dir-search-form').serializeArray() ,
type: "POST",
context: document.body
}).done(function(json){
var mapDiv = $("#map-container");
mapDiv.gmap3({ clear: { } });
for(key in json){
(function(key){
var lon = json[key].coords.lon;
var lat = json[key].coords.lat;
var link = json[key].link;
//all map parameters
mapDiv = jQuery("#map-container");
mapDiv.height(390).gmap3({
map: {
options: {
"draggable": true
,"mapTypeControl": true
,"mapTypeId": google.maps.MapTypeId.ROADMAP
,"scrollwheel": true
,"panControl": true
,"rotateControl": true
,"scaleControl": true
,"streetViewControl": true
,"zoomControl": true
,"center": [56.9475, 24.106944]
,"zoom": 8
}
},
marker:{
values:[
{latLng:[lat, lon], link:[link]}
],
options:{
"animation": google.maps.Animation.DROP,
"draggable": false,
"clickable": true,
"icon": "<?php bloginfo('template_directory'); ?>/images/new/gmap.marker.png",
},
events: {
click: function(){document.location.href = json[key].link.link},
}
});
})(key);