Common closure issues for looping markers in Google Map API

Question

I am a beginner to write a webpage and would like to show some markers in the google map with infowindows. However, i found that the infowindow always show the information of the last records. With reference from the previous article in stackoverflow, i found that the problem is mostly likely caused by the common closure problem in javascript but i find it difficult to understand how to fix the problem in my coding. Can any one help?

Besides, i would like to ask one simple html question. How to create a href if the PDF name is a variable as shown in the coding. Many thanks!!!

var ShowAll=function() {
        var URL2="Show_all_trig.php";
        $.ajax({
            url: URL2,
            type: "POST",
            dataType: "json",
            success: function(data){
                $.each(data, function(i, item) {
                     station_num = item.station_num; 
                     trig_name = item.trig_name;
                     loc_x = item.loc_x;
                     loc_y = item.loc_y;
                     loc = new google.maps.LatLng(loc_x, loc_y);    
                     var trigicon = 'images/Start2.png';
                     marker = new google.maps.Marker({
                     map: map,
                     position: loc,
                     icon: trigicon,
                     title: trig_name
                     })
                     markersArray.push(marker)
                     html = "<b>Trig. Station Name: </b>" + trig_name + "<br/> <b>Station Number: </b>" + station_num + "<br/> <b>Sketch: </b>" +"<a target='_blank' href= 'summarysheet/'+ 'station_num +'.pdf'>station_num</a>";

                     google.maps.event.addListener(marker, 'click', function() {
                        //alert (html);
                        infoWindow.setContent(html);
                        infoWindow.open(map, marker);
                        });
                }); 
            },

            error:function(xhr, ajaxOptions, thrownError){ 
                alert(xhr.status); 
                alert(thrownError); 
             }

        });
}

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

Here's the technique you're looking for:

(function(temp_html,temp_map,temp_marker) {
  google.maps.event.addListener(temp_marker, 'click', function() {
    infoWindow.setContent(temp_html);
    infoWindow.open(temp_map, temp_marker);
  });
}(html,map,marker));

In short, what you're doing here is (a) creating an anonymous function with three arguments, (b) passing html, map and marker in as a values for those arguments, and (c) immediately executing the anonymous function. The temp_ variables are enclosed in the anonymous function and are invisible to the surrounding code, hence the name "closure."

(In your case, it looks like map is a global variable which you don't really need to pass into the closure. But it's not a bad thing to do anyway.)

edited May 23 '17 at 12:03

Community

1
1

answered May 10 '13 at 14:00

Blazemonger

90,923
26
142
180

Thanks for your comment... but i am really sorry about that i am not too understand how to implement your coding. – Jimmy Lee May 10 '13 at 14:26
Just replace your current `google.maps.event.addListener` call with my code sample and let me know how it works. – Blazemonger May 10 '13 at 14:27
Oh.. thanks.. it works!!! One more question... if i want to configure the 'html' parameter with the variable 'trig_name' as the name of the PDF file. How can i do this... many thanks!!! – Jimmy Lee May 10 '13 at 14:30
This *should* be a separate question, but it's a short answer anyway. Try changing `"station_num"` (when you set the "html" variable) to: `"station_num"` – Blazemonger May 10 '13 at 14:33

Common closure issues for looping markers in Google Map API

1 Answers1