I'm working on a page which has a map containing many markers and a list on the side of the marker titles. This example helped me get started. http://jsfiddle.net/svigna/pc7Uu/
I have images and descriptions relative to each marker location that I would like to display in the side list only when the associated marker is clicked.
Any ideas in how I could go about implementing this logic? Thanks.
Here is my 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>
Here is my angular
//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');
}
});
Here is my 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
}
];
You need to set a scope variable to something in the click event.
In your controller:
$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);
});
On your view you can:
<h1>{{selectedMarker.title}}</h1>
Here is a full demo: http://jsfiddle.net/pc7Uu/194/
Also if you want to display HTML (marker's content) on the version of angular you've included (1.1.1) you will need to include ngSanitize.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.