javascript - Google Map and Marker Listener Issue (using Angular) -

i've got issue using gmap , angular first, let me explain issue :

• my markers correctly set on map
• when click on marker want push $scope.details array use in view (see below)
• basically, i'm coding own infowindow display partners details on sidebar on right (instead of displaying on map)
• my problem whenever click on marker, it's pushing $scope.details last index in loop

now, let me share code :

map initialization (centered on france fyi):

var map = null,     markers = []; $scope.details = [];  function initializemap() {     var mapoptions = {       center: { lat: 46.52863469527167, lng: 2.43896484375},       zoom: 5     };     map = new google.maps.map(document.getelementbyid('map-canvas'),         mapoptions);      setmarkers(map, partners); } 

partners info placed on map

var partners = [         {             'title' : 'partenaire 1',              'lat' : 46.52863469527167,              'lng' : 2.43896484375,             'type' : 'distributeur'         },         {             'title' : 'partenaire 2',              'lat' : 47.52863469527167,              'lng' : 3.43896484375,             'type' : 'fabricant'         },         {             'title' : 'partenaire 3',              'lat' : 46,              'lng' : 5,             'type' : 'fabricant'         }     ]; 

setting markers on map

function setmarkers(map, locations) {          (var in locations) { // looping through given locations (ie through partners array)             var location = locations[i];             var mylatlng = new google.maps.latlng(location.lat, location.lng);             var marker = new google.maps.marker({                 position: mylatlng,                 map: map,                 title: location.title             });             markers.push(marker); // pushing markers in own array later purpose             marker.setmap(map); // setting marker on map              google.maps.event.addlistener(marker, 'click', function() { // adding click listener on marker                 $scope.details.push(location); // pushing clicked marker details                 // line above pushing last index in loop                 $scope.$apply(); // applying changes (needed in case)             });         }     }; 

view code :

<div class="row">     <div class="col-md-9">         <div style="height:500px; width: 100%; position: relative">              <div id="map-canvas"></div>         </div>     </div>      <div class="col-md-3">         <pre>{{details}}</pre>         <div class="well" ng-repeat="d in details track $index">             <span class="glyphicon glyphicon-remove" ng-click="removedetail($index)"></span>             <p>{{d.title}}</p>             <button class="btn btn-default" ng-click="localize(details[$index])">localiser</button>         </div>     </div> </div> 

i can't find whatever i'm doing wrong , hope guys me ! many in advance.

ps : don't expect fast answer me since i'll away few days

your problem here:

for (var in locations) { // looping through given locations (ie through partners array)     var location = locations[i];     ...      google.maps.event.addlistener(marker, 'click', function() {          $scope.details.push(location);      }); } 

you loop on markers, updating variable called location. each marker has own event listener, uses location... that's not version created inside loop @ every iteration, it's whatever location when user clicks marker, i.e. value has @ end of loop.

one quick fix here add location custom property each marker, can refer in event listener, e.g.

var marker = new google.maps.marker({     position: mylatlng,     map: map,     title: location.title,     location: location });  google.maps.event.addlistener(marker, 'click', function() {     $scope.details.push(this.location);  });