Setting different content for the Google map does not work and content does not update

Question

I am using the map from the following link:

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-clustering.html

I changed the code like this :

 $(function() { 
            demo.add(function() {
                $('#map_canvas').gmap({'zoom': 2, 'disableDefaultUI':true}).bind('init', function(evt, map) {
                    var bounds = map.getBounds();
                    var mark1 = "hello";
                    var mark2 = "bye";
                    var temp = mark1;
                    var southWest = bounds.getSouthWest();
                    var northEast = bounds.getNorthEast();
                    var lngSpan = northEast.lng() - southWest.lng();
                    var latSpan = northEast.lat() - southWest.lat();
                    for (var i = 0; i < 1000; i++) {
                            if(i % 2===0)
                            {
                            temp=mark2;
                            }
                            else
                            {
                                  temp=mark1;
                            }
                        $(this).gmap('addMarker', { 'position': new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()) } ).click(function() {
                            $('#map_canvas').gmap('openInfoWindow', { content : temp }, this);
                        });
                    }
                    $(this).gmap('set', 'MarkerClusterer', new MarkerClusterer(map, $(this).gmap('get', 'markers')));
                });
            }).load();
        });

So as you can see I added the following lines

 var mark1 = "hello";
 var mark2 = "bye";
 var temp = mark1;

and also I added these lines:

 if(i % 2===0)
                            {
                            temp=mark2;
                            }
                            else
                            {
                                  temp=mark1;
                            }

Now I expect that I see some of the markers to show hello and some shows bye but it always show hello and never show bye. How can I set the content for some markers to bye and some to hellO?

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Mar 22 '14 at 05:18
Thanks for your answer, I looked at that link and the code provided there a lot but since I am novice in javascript and that code is fairly different I can not adapt to my code I understood that it is closure problem but when I try to adapt the code in the link that you provided I loose the clustering effect of map can you guid me how to solve this issue with the jquery code that I provided? — HMdeveloper, Mar 22 '14 at 16:22
That isn't a very realistic use case. How are you really planning on using this code. — geocodezip, Mar 22 '14 at 16:49

score 1 · Accepted Answer · answered Mar 22 '14 at 17:00

This works for me (doesn't use function closure):

  $(this).gmap('addMarker', 
    { 'position': new google.maps.LatLng(
         southWest.lat() + latSpan * Math.random(), 
         southWest.lng() + lngSpan * Math.random()),
      'content': temp 
    } 
  ).click(function(i) {
    $('#map_canvas').gmap('openInfoWindow', { 
       content : this.content }, this);
  });

working example (with hello/bye)

working example (displays "marker x" in infowindow)

You are awesome you helped me a lot:) – HMdeveloper Mar 22 '14 at 17:20 — HMdeveloper, Mar 22 '14 at 17:20

Setting different content for the Google map does not work and content does not update

1 Answers1