var $app = angular.module('appMaps', ['google-maps']);
$app.controller('mainController', ['$rootScope', '$scope', '$location', '$timeout',
function($rootScope, $scope, $location, $timeout) {
$scope.windowClick = function() {
alert('window click');
}
$scope.map = {
control: {},
center: {
latitude: -33.5,
longitude: -70.7
},
zoom: 12,
markers: [{
coordinates: {
latitude: -33.433441,
longitude: -70.71817
},
options: {
id: 1,
title: "New point 1",
draggable: true
}
}, {
coordinates: {
latitude: -33.428441,
longitude: -70.74
},
options: {
id: 2,
title: "New point 2",
draggable: true
}
}],
markers2: [{
id: 3,
labelTitle: 'Point 3',
coordinates: {
latitude: -33.5,
longitude: -70.7
},
options: {
id: 3,
title: "New point 3", // Can't be used as labelContent
draggable: false
},
showWindow: false,
markerClick: function() {
this.showWindow = true;
$scope.$apply();
}
}]
};
}
]);
<!DOCTYPE html>
<html ng-app="appMaps">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
<script src="http://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainController">
<div id="map_canvas">
<google-map center="map.center" zoom="map.zoom" draggable="true" control="map.control">
<!-- <marker ng-repeat="m in map.markers" coords="m.coordinates" options="m.options">
If marker label is added, dragging the marker will not work
<marker-label content="m.options.title" anchor="22 0" class="marker-labels"></marker-label>
</marker> -->
<marker ng-repeat="m in map.markers2" coords="m.coordinates"
labelContent="'labelTitle'"
labelAnchor="22 0"
labelClass="marker-labels"
options="m.options" click="m.markerClick()">
<window show='m.showWindow'>
<div>
<a href="javascript:void(0)" ng-click="windowClick()">hit me</a>
<p>Test ng-click in window</p>
</div>
</window>
</marker>
</google-map>
</div>
</body>
</html>
.angular-google-map-container {
width: 100%;
height: 600px;
}