Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #27148 > unrolled thread

javascript loop problem

Back to article view | Back to comp.lang.javascript

Contents

  javascript loop problem chrisb@ctlsoft.com - 2015-03-31 19:05 -0700
    Re: javascript loop problem Richard Maher <maher_rjSPAMLESS@hotmail.com> - 2015-04-01 10:49 +0800
    Re: javascript loop problem "Christoph M. Becker" <cmbecker69@arcor.de> - 2015-04-01 14:42 +0200
    Re: javascript loop problem Denis McMahon <denismfmcmahon@gmail.com> - 2015-04-01 14:43 +0000

#27148 — javascript loop problem

little script which adds map markers to the appropriate locations with a label.
The array 'myaddresses' contain the locations to mark on the map and the numbers to put on the labels.
Works fine for the location bit, but the labels all show the last count (35).

So the line labelContent: myaddresses[x][1] always seems to return the final array element for some reason.

Any ideas greatly appreciated!
 

<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
    var myOptions = {
        zoom: 6,
        center: new google.maps.LatLng(-42.397, 172.644),
        mapTypeId: 'terrain'
    };
    var map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var myaddresses = [['Cambridge', 100], ['Auckland',20], ['Wellington',1], ['Taupo',35]];

    for (var x = 0; x < myaddresses.length-1; x++) {
        
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + myaddresses[x][0] + '&sensor=false', null, function (data) {
            try {

                var p = data.results[0].geometry.location;
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var marker1 = new MarkerWithLabel({
                    position: latlng,
                    draggable: false,
                    raiseOnDrag: false,
                    title: myaddresses[x][0],
                    map: map,
                    labelContent: myaddresses[x][1],
                    labelAnchor: new google.maps.Point(12, 50),
                    labelClass: "labels",
                    labelStyle: { opacity: 1.0 }
                    
                });

                google.maps.event.addListener(marker1);
            }
            catch (err) { }

            
        });
      }

});
});

</script>

[toc] | [next] | [standalone]

#27149

On 4/1/2015 10:05 AM, chrisb@ctlsoft.com wrote:
> little script which adds map markers to the appropriate locations with a label.
> The array 'myaddresses' contain the locations to mark on the map and the numbers to put on the labels.
> Works fine for the location bit, but the labels all show the last count (35).
>
> So the line labelContent: myaddresses[x][1] always seems to return the final array element for some reason.
>
> Any ideas greatly appreciated!

1) Stop using that jQuery shit!!!

2) Load the maps with 		
         google.load('maps', '3', {
             'other_params' :
             'sensor=true&language=' + params.lang,
			'callback' : mapsLoaded
         });

3) What the hell is MarkerWithLabel and where does it com from?

4) FWIW, InfoWindow.setContent() does not render the change a(nother) 
InfoWindow.Open() is needed to see the results.

5) Use InfoBubble instead!!!

6) Don't know what that crap getJSON does but I'm guessing you're 
specifying a callback that fires after the loop (once for each of your 
calls. Javascript is single-threaded. Have to leave your function to 
allow further events in). "X" has it's last value.

7) You need a closure (actually a redesign but . . .) use function(inCntr){
var x = inCntr;
function(){
// your function referencing x
}
}(x);

8) I lived in Wellington and Christchurch for 18 months. Shame about 
CHCH :-(

[toc] | [prev] | [next] | [standalone]

#27154

chrisb@ctlsoft.com wrote:

> little script which adds map markers to the appropriate locations with a label.
> The array 'myaddresses' contain the locations to mark on the map and the numbers to put on the labels.
> Works fine for the location bit, but the labels all show the last count (35).
> 
> So the line labelContent: myaddresses[x][1] always seems to return the final array element for some reason.

When this expression is evaluated, x === myaddresses.length-1.

> <script type='text/javascript'>
> $(window).load(function(){
> $(document).ready(function () {

That seems clumsy at best.  You'll want to skip registering an event
listener for window's load event, here.

>     var myOptions = {
>         zoom: 6,
>         center: new google.maps.LatLng(-42.397, 172.644),
>         mapTypeId: 'terrain'
>     };
>     var map = new google.maps.Map($('#map_canvas')[0], myOptions);
> 
>     var myaddresses = [['Cambridge', 100], ['Auckland',20], ['Wellington',1], ['Taupo',35]];
> 
>     for (var x = 0; x < myaddresses.length-1; x++) {

Don't use a for loop here, but rather $.each().

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#27155

On Tue, 31 Mar 2015 19:05:54 -0700, chrisb wrote:

>     var myaddresses = [['Cambridge', 100], ['Auckland',20],
>     ['Wellington',1], ['Taupo',35]];
> 
>     for (var x = 0; x < myaddresses.length-1; x++) {
>         /* do stuff */
>     }

Let's step through the loop.
myaddresses.length = 4

1st time round. x starts as 0. x is less than 3. 1 is added to x. x is 
now 1. The loop body executes with x = 1, myaddresses[x] = 
['Auckland',20].

2nd time round. x starts as 1. x is less than 3. 1 is added to x. x is 
now 2. The loop body executes with x = 1, myaddresses[x] = 
['Wellington',1].

3rd time round. x starts as 2. x is less than 3. 1 is added to x. x is 
now 3. The loop body executes with x = 1, myaddresses[x] = ['Taupo',35].

4th time round. x starts as 3. x is not less than 3. loop terminates.

You might like to look at the (admittedly non jquery) page here:

http://www.sined.co.uk/tmp/tasfire3.htm

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web