Google Maps Angular Js

Question

Je travaille sur une page qui a une carte contenant de nombreux marqueurs et une liste sur le côté des titres de marqueur. Cet exemple m'a aidé à démarrer. J'ai des images et des descriptions relatives à chaque emplacement de marqueur que je voudrais afficher dans la liste latérale seulement lorsque le marqueur associé est cliqué.

Des idées sur la façon dont je pourrais mettre en œuvre cette logique? Merci.

Voici mon 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> 

Voici mon angulaire

//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'); 
} 

}); 

Voici mon 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

Vous devez définir une variable de portée sur quelque chose dans l'événement click.

Dans votre contrôleur:

 $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); 
    }); 

votre point de vue, vous pouvez:

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

Voici une démo complète: http://jsfiddle.net/pc7Uu/194/

Aussi, si vous souhaitez afficher HTML (le contenu de marqueur) sur la version de angular que vous avez incluse (1.1.1), vous devrez inclure ngSanitize.

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