old value of array replace by new value of array

Question

I am trying to do is onclick of google map. Attempting to create array which contains address. The problem is when I alert the array it only displays the current value.
I also tried waypts.length, it alerts only 1. It means array value is replaced when I click on google map. So what seems to be the problem?

code:

  function initialize() {
  var geocoder = new google.maps.Geocoder();
  var waypts=[];
  var mapOptions = {
   zoom: 11,
   center: new google.maps.LatLng(23.0171240, 72.5330533),
   mapTypeId: google.maps.MapTypeId.ROADMAP
   };
   var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
  google.maps.event.addListener(map, 'click', function(e) {
  placeMarker(e.latLng, map);
  var input=e.latLng;
  var lat = parseFloat(input.lat());
  var lng = parseFloat(input.lng());
  var latlng = new google.maps.LatLng(lat, lng);
  geocoder.geocode({'latLng': latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
       var add=results[0].formatted_address;
       waypts.push({
        location:add,
        stopover:true
       });
       var lngth=waypts.length;
       alert(JSON.stringify(waypts));
    }
  });
          <!--  **************    for route between markers   *******************  -->
  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  //directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay = new google.maps.DirectionsRenderer({
  suppressMarkers: true, //false it if you want a marker from the direction service 
  polylineOptions: {
      strokeColor: 'green', //"black",
      strokeOpacity: 1.0,
      strokeWeight: 3
    }
  });

    var lngth=waypts.length;
    var start = waypts[0][0];//"Bopal, Ahmedabad, Gujarat, India";
    var end = waypts[waypts.length-1][0];//"Nikol, Ahmedabad, Gujarat, India";

    //remove start destination from array
    var a=waypts.shift();
    //remove end destination from array
    waypts.pop();

    var request = {
          origin:start,
          destination:end,
          waypoints:waypts,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
    });
    directionsDisplay.setMap(map);

 });


}
   function placeMarker(position, map) {
  var marker = new google.maps.Marker({
    position: position,
    map: map
  });
  map.panTo(position);
}

google.maps.event.addDomListener(window, 'load', initialize);

Thanks in advance.

score 1 · Answer 1 · answered Oct 15 '13 at 11:42

1

I'm assuming this is present inside a function.

The problem with the code might be that waypts is made a local variable.

If it is referred anywhere else, the value cannot be obtained.

The variable is reinitialized each time the function is called, so any previous values stored in the array will be lost.

Make waypts global and try by defining the variable outside the function.

answered Oct 15 '13 at 11:42

Aashray

2,753
16
22

i update the quetion.the array variable is inside the function. – DS9 Oct 15 '13 at 11:47
Are you calling the function repeatedly and pushing values to `waypts` with these repeated calls? – Aashray Oct 15 '13 at 11:49
whenever i click on google map this function call `google.maps.event.addListener(map, 'click', function(e) {` . – DS9 Oct 15 '13 at 11:51
Is `initialize()` being called in this? – Aashray Oct 15 '13 at 11:53
The you need to make the variable `waypts` global. This can be done by placing `var waypts=[];` outside the function. This will be referenced everywhere after this. – Aashray Oct 15 '13 at 12:01
Post your other function which refers `waypts`. – Aashray Oct 15 '13 at 12:14
thanks for your help.other function create problems. – DS9 Oct 15 '13 at 12:46

old value of array replace by new value of array

1 Answers1

Linked