current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote -2 down vote favorite

I am attempting to load some div's with google map images from a loop that adds one to the value of a document.get. Problem is the getLocation() call comes at the final iteration of the loop, but then iterates the loops n number of times.

for(var i = 1; i < length; i++){
var longitude = 1.8612393999999999;
var latitude = 50.7263312;
document.getElementById("longInput").value = longitude;
document.getElementById("latInput").value = latitude;

var mapholder = "mapholderM"+i;
document.getElementById("mapholderValue").value = mapholder;
theMapholder=document.getElementById(mapholder);

getLocation();
}

getLocation() uses longInput and latInput values for lat and lon variables, and theMapholder as a place to put the target div image. Maps are able to get the co ordinates and as explaned below on the final, or end of the loop also the theMapholder value.

I think this is not an issue with getLocation(), and more how I am attempting to use it. By adding an alert in the getLocation() call and viewing the elements on screen I know that the elements are populated though the loop and change, then get location is called n number of times after this happens. Then getLocation() only picks up the values that are set as the iterations of giving element values are complete.

Adding an alert at the beginning of the loop makes the loop go round n number of times then execute getLocation() only once.

Just to sum up: loops and changes element values, one by one. once this is complete getLocation() is called, with the same number of iterations. getLocation() can now only access the final setting of the elements so only gives one div a map.

Dean

Update: Sorry to have given incorrect information: it would appear any method call from my loop results in the same behaviour:

function pulse(){
     $('#contentDiv').delay(200).fadeOut('slow').delay(50).fadeIn('slow');    
}

Calling this method from my loop:

for(var i = 1; i < length; i++) {        
    var longitude = 1.8612393999999999;
    var latitude = 50.7263312;

    alert("end of loop");        
    pulse();
}

results in an alert n number of times, then pulse is executed? Sorry for confusion.

Dean

update: Google maps script:

function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  alert($("#longInput").val()); */
  lat= $("#latInput").val();
  lon= $("#longInput").val();
  latlon=new google.maps.LatLng(lat, lon);
  mapholder=theMapholder;

  alert("getLocation " + theMapholder);

  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(theMapholder,myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  }

  function showError(error)
  {
  switch(error.code) 
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>

Using the alert in showPosition I can see that it is only called after the loop has updated the elements.

Why would the a function behave like this, and only be called after the loop has executed everything else?

share|improve this question
1  
Please indent your code. It is very hard to read. –  Vivin Paliath May 8 '13 at 16:13
2  
It would be extremely helpful to see the "getLocation()" function. –  Pointy May 8 '13 at 16:24
1  
Effects like "delay", "fadeOut", etc. are asynchronous. The "pulse" function will return immediately, but the effects will continue over time afterwards. –  Pointy May 8 '13 at 16:47
1  
You cannot make gradual changes (like "fadeIn") that way. You can pass callback functions to those animations, and start subsequent animations from the callbacks. –  Pointy May 8 '13 at 17:18
2  
There are no way to make multiple visual changes inside a for loop where the UI updates after each iteration of that for loop. You have to implement it using async callbacks, like using setTimeout –  Matt Esch May 8 '13 at 17:38

1 Answer 1

up vote 0 down vote

As anyone is aware that reads this it was a little confusing, probably due to needing to learn more and javascript although as you will see in the comments there is some good adivice to learn from for me. Any how my solution to the problem:

getLocation() was being itterated, AFTER the loop had completed iterating over all the other code. So as a hack, when the getLocation() method is iterated that was the time make the element value changes that the function could use:

  var y=1;
  var x=document.getElementById("demo");

  function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

  function showPosition(position)
  {
    var longitude = -1.8612393999999999;
    var latitude = 50.7263312;

    document.getElementById("longInput").value = longitude;
    document.getElementById("latInput").value = latitude;

    var mapholder = "mapholderM"+y;
    document.getElementById("mapholderValue").value = mapholder;
    theMapholder=document.getElementById(mapholder);

    lat= $("#latInput").val();   
    lon= $("#longInput").val();
    latlon=new google.maps.LatLng(lat, lon);
    mapholder=theMapholder; 
    alert("getLocation " + theMapholder+y);
    y++;

    var myOptions={
      center:latlon,zoom:14,
      mapTypeId:google.maps.MapTypeId.ROADMAP,
      mapTypeControl:false,
      navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
    };

  var map=new google.maps.Map(theMapholder,myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

Notice the introduction of variable y which increments in value each time the method is called to use in the get element id.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.