Google MapsでクリックするとAngularJS開いたウィンドウ

Question

Google Mapsの地図と検索エンジンに表示されているさまざまなマーカーを持つウェブサイトを構築しています。マーカーを使って地図をナビゲートすることができます。マーカーをクリックしてコンテンツを表示することができます。検索結果をクリックすると、地図が結果に移動し、マーカーコンテンツを含むウィンドウを開くことができます。 これは

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> 

私のコードです地図と同時に検索結果をクリックするとウィンドウを開くために追加する動く はInfoWindow.open関数は2番目の引数としてMarker objectを期待しますが、あなたの例ではargsオブジェクトがないMarkerクラスであるため、これが発生した任意のヘルプ

Answer 1

いただきありがとうございます。あなたが代わりに選択したオブジェクトのインデックス渡すことができます。

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

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

をしてから、対応するマーカーオブジェクトを取得：

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)