Google Maps Angular Js

Question

Я работаю над страницей, на которой есть карта, содержащая множество маркеров и список на стороне названий маркеров. Этот пример помог мне начать работу. http://jsfiddle.net/svigna/pc7Uu/

У меня есть изображения и описания относительно каждого местоположения маркера, которые я хотел бы отображать в боковом списке только при нажатии соответствующего маркера.

Любые идеи в том, как я мог бы реализовать эту логику? Благодарю.

Вот мой HTML

<div ng-app="mapsApp" ng-controller="MapCtrl"> 
<div id="map"></div> 
<div id="class" ng-repeat="marker in markers | orderBy : 'title'"> 
    <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a> 
    <img ng-src="{{marker.image}}" alt="\{\{album.album\}\} Cover Image" width="300px;" height="300px;"> 
</div> 
</div> 

Вот мой угловой

//Angular App Module and Controller 
angular.module('mapsApp', []) 
.controller('MapCtrl', function ($scope) { 

var mapOptions = { 
    zoom: 9, 
    center: new google.maps.LatLng(10.51, 7.432), 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scrollwheel: false 
} 

$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 

$scope.markers = []; 

var infoWindow = new google.maps.InfoWindow({ 
maxWidth: 200 
}); 

var createMarker = function (info){ 

    var marker = new google.maps.Marker({ 
     map: $scope.map, 
     position: new google.maps.LatLng(info.lat, info.long), 
     title: info.location, 
     image: info.img 
    }); 
    marker.content = '<div class="infoWindowContent">' + info.desc + '</div>'; 

    google.maps.event.addListener(marker, 'click', function(){ 
     infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); 
     infoWindow.open($scope.map, marker); 
    }); 

    $scope.markers.push(marker); 

} 

for (i = 0; i < cities.length; i++){ 
    createMarker(cities[i]); 
} 

$scope.openInfoWindow = function(e, selectedMarker){ 
    e.preventDefault(); 
    google.maps.event.trigger(selectedMarker, 'click'); 
} 

}); 

Вот мой JSON

var cities = [ 
{ 
    location : 'Unguwar Rimi', 
    desc : "<div id='hook' class='image'><img src=\"images/wells/KA KAF 001 Unguwar Rimi/IMG_4569.JPG\"><br><strong>Kaduna, Nigeria</strong><br>Village: Unguwar Rimi<br>Completed: 2011<br><p>'This borehole is a good blessing, our labor and stress is reduced.'</p></div>", 
    img: "images/wells/KA KAF 001 Unguwar Rimi/IMG_4569.JPG", 
    lat : 10.52, 
    long : 7.43 
}, 
{ 
    location : 'Gidan Bege Kadarko Kagoro', 
    desc : "<div id='hook' class='image'><img src=\"images/wells/KA KAU 001 Gidon Bege Kadarko Kagoro/IMG_4556.JPG\"><br><strong>Kaduna, Nigeria</strong><br>Village: Unguwar Rimi<br>Completed: 2008<br><p>'God is great, the village no longer has a water problem and we never run short of water.'</p></div>", 
    img: "images/wells/KA KAU 001 Gidon Bege Kadarko Kagoro/IMG_4556.JPG", 
    lat : 10.53, 
    long : 7.27 
}, 
{ 
    location : 'ECWA Seminary Kagoro', 
    desc : "<div id='hook' class='image'><img src=\"images/wells/KA KAU 002 ECWA Seminary Kagoro/IMG_8123.JPG\"><br><strong>Kaduna, Nigeria</strong><br>Village: ECWA Seminary Kagoro<br>Completed: 2008<br><p>'God is our Savior. He blessed us with this borehole which provides water to our staff and students'</p></div>", 
    img: "images/wells/KA KAU 002 ECWA Seminary Kagoro/IMG_8123.JPG", 
    lat : 9.69, 
    long : 8.39 
} 
]; 

Answer 1

Вам нужно установить переменную области видимости в событие click.

В контроллере:

 $scope.selectedMarker = {}; 
    // etc 
    google.maps.event.addListener(marker, 'click', function(){ 

     infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); 
     $scope.selectedMarker = marker; 
     $scope.$apply(); 
     infoWindow.open($scope.map, marker); 
    }); 

На ваш взгляд, вы можете:

<h1>{{selectedMarker.title}}</h1> 

Вот полный демо: http://jsfiddle.net/pc7Uu/194/

Кроме того, если вы хотите отобразить HTML (содержание маркера) на версии углового вы включили (1.1.1), вам нужно будет включить ngSanitize.

http://jsfiddle.net/xVGP5/1/