title: Why it keeps iterating through the array elements multiple times?
body: <p>I am trying to output all the values from the array with 'title element' There are 10 values - titles. PROBLEM:</p>
  
  <ol>
  <li>The for loop output all 10 values but it does this 10 times again. </li>
  </ol>
  
  <p>Title 1
  Title 2
  Title 3
  Title 4
  Title 5
  Title 6
  Title 7
  Title 8
  Title 9
  Title 10</p>
  
  <p>(OUTPUT AGAIN 10 TIMES)</p>
  
  <p>How can I solve this cannot get my head around it, the code:
  This function add the data in the array  <code>p_marker.push(marker);</code>.</p>
  
  <pre><code>function placesToVisitMarker(results, status) {
      image = 'pin56.png';
      console.log(results);
      for (var i = 0; i &lt; results.length; i++) {
          var marker = new google.maps.Marker({
              position: results[i].geometry.location,
              map: map,
              title: results[i].name,
              icon: image
          });
  
          distanceService.getDistanceMatrix({
              origins: [currentLocation],
              destinations: [results[i].geometry.location],
              travelMode: google.maps.TravelMode.WALKING
          }, callback);
          p_marker.push(marker);
      }
  }
  </code></pre>
  
  <p>This function is were I suppose to output the title and distance into the <code>#list div</code></p>
  
  <pre><code>function callback(response, status) {
      if (status = "OK") {
          for (var i = 0; i &lt; p_marker.length; i++) {
              $("#list").append(p_marker[i].title + "&lt;/br&gt;");
          }
          //$("#list").append( +" "+ response.rows[0].elements[0].duration.text + "&lt;/br&gt;")        
      } else {
          $("#list").append("ERROR" + status);
      }
  }
  </code></pre>