google-mapsgoogle-maps-api-3jquery-gmap3

set the right link on each marker


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
                        }
                    },
                },
            });
        }
    });
});

Solution

  • Did that by including cycle before function(key) -> "for(key in json){... })(key);"

    $('#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);