AngularJS fenêtre ouverte lorsque vous cliquez sur dans Google Maps

Question

Je construis un site Web avec différents marqueurs affichés dans une carte Google Maps et un moteur de recherche. Je peux naviguer à travers la carte avec les marqueurs, je peux cliquer sur un marqueur pour montrer le contenu. Quand je clique sur un résultat de recherche, la carte fait un panoramique vers le résultat et je voudrais en même temps que les fenêtres avec le contenu des marqueurs soient ouvertes. Ce mon code

mymarkers.js

var app = angular.module('myApp'); 
app.constant("myMarkers", [{ 
       lat: .., 
       lng: .., 
       title:'..' 
},{ 
       lat: .., 
       lng: .., 
       title:'..' 
}..] 

app.js

var app = angular.module('myApp', []); 
angular.module('myApp').controller("myController", ["$scope", "myMarkers", function($scope, myMarkers){ 
    $scope.markers= myMarkers; 
    $scope.$on("gmaps.marker.click", function(event, map, marker) { 

    }); 
    //call the directive with the Angular event system 
    //1st parameter of the listener = event 
    $scope.centerMapOnMarker = function (marker){ 
     $scope.$broadcast('center-on-marker', marker); 
    } 
}]); 

app.directive('myMap', ["myMarkers", function(myMarkers) { 
    // directive link function 
    var link = function(scope, element, attrs) { 
     var map, infoWindow; 
     var markers = []; 
     var mapOptions = {.. 
     }; 

     // init the map 
     function initMap() {.. 
     }  

     // place a marker 
     function setMarker(map, position, title, content,link) {.. 
      .. 
     } 
     //center to the marker 
     //1st parameter of the listener = event 
     scope.$on('center-on-marker', function (event, args) { 
      var center = new google.maps.LatLng(args.lat, args.lng); 
      map.panTo(center); 
      map.setZoom(15); 
      var infowindow = new google.maps.InfoWindow(); <-- not working 
      infowindow.setContent(args.content); 
      infowindow.open(map, args); 

     }); 
     function returnMarker(){ 
      window.alert(markers[0].title); 
     } 
     // show the map and place some markers 
     initMap(); 

     for (var i = 0; i < 100; i++) { 
      setMarker(map, new google.maps.LatLng(myMarkers[i].lat, myMarkers[i].lng), myMarkers[i].title, myMarkers[i].content, myMarkers[i].icon); 
     } 

    }; 

    return { 
     restrict: 'A', 
     template: '<div id="gmaps"></div>', 
     replace: true, 
     link: link 
    }; 
}]); 

index.html

 <div my-map=""></div> 

     <div class="myresearch"> 
      <input placeholder="Search a restaurant" ng-model="search"> 
       <div ng-show="search.length"> 
       <ul class="list" ng-repeat="marker in markers | filter: search as filtered"> 
        <li> 
        <span ng-click="centerMapOnMarker(marker)"> 
        <label class="textr"> {{marker.title}} </label> 
</li> 
</ul> 

Vous pouvez le voir avec la flèche dont la fonction que je voudrais ajouter afin d'ouvrir la fenêtre lorsque je clique sur les résultats de la recherche en même temps que la carte bouge toi. Merci pour toute aide

Answer 1

Il se produit puisque la fonction InfoWindow.open attend Marker object comme second argument, mais dans votre exemple objet args est pas une classe Marker. Vous pouvez passer à la place l'indice d'objet sélectionné:

<span ng-click="centerMapOnMarker($index)" /> 

$scope.centerMapOnMarker = function(index) { 
    $scope.$broadcast('center-on-marker', index); 
} 

puis obtenir l'objet marqueur correspondant:

scope.$on('center-on-marker', function(event, index) { 
    var selectedMarker = markers[index]; 
    map.panTo(selectedMarker.getPosition()); 
    map.setZoom(15); 
    var infowindow = new google.maps.InfoWindow(); 
    infowindow.setContent(selectedMarker.content); 
    infowindow.open(map, selectedMarker); 
}); 

Demo (plunker)