{{zoomMessage}}
13 |<section id="map">
51 | <h4>Click to add a marker!</h4>
52 | <p>{{zoomMessage}}</p>
53 | <ul>
54 | <li ng-repeat="marker in myMarkers">
55 | <a ng-click="myMap.panTo(marker.getPosition())">Pan to Marker {{$index}}</a>
56 | </li>
57 | </ul>
58 |
59 | <!-- this is the confusing part. we have to point the map marker directive
60 | at an existing google.maps.Marker object, so it can hook up events -->
61 | <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
62 | ui-event="{'map-click': 'openMarkerInfo(marker)'}">
63 | </div>
64 |
65 | <div ui-map-info-window="myInfoWindow">
66 | <h1>Marker</h1>
67 | Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
68 | <a ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
69 | </div>
70 |
71 | <!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
72 | google maps -->
73 | <div id="map_canvas" ui-map="myMap" class="map"
74 | ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
75 | ui-options="mapOptions">
76 | </div>
77 | </section>
78 |
79 | .map {
84 | height: 400px;
85 | width: 600px;
86 | margin: auto;
87 | }
88 |
89 | function initCall() {
94 | console.log('Google maps api initialized.');
95 | angular.bootstrap(document.getElementById('map'), ['doc.ui-map']);
96 | }
97 |
98 | app.controller('MapCtrl', ['$scope', function($scope) {
99 |
100 | $scope.myMarkers = [];
101 |
102 | $scope.mapOptions = {
103 | center: new google.maps.LatLng(35.784, -78.670),
104 | zoom: 15,
105 | mapTypeId: google.maps.MapTypeId.ROADMAP
106 | };
107 |
108 | $scope.addMarker = function($event, $params) {
109 | $scope.myMarkers.push(new google.maps.Marker({
110 | map: $scope.myMap,
111 | position: $params[0].latLng
112 | }));
113 | };
114 |
115 | $scope.setZoomMessage = function(zoom) {
116 | $scope.zoomMessage = 'You just zoomed to '+zoom+'!';
117 | console.log(zoom,'zoomed')
118 | };
119 |
120 | $scope.openMarkerInfo = function(marker) {
121 | $scope.currentMarker = marker;
122 | $scope.currentMarkerLat = marker.getPosition().lat();
123 | $scope.currentMarkerLng = marker.getPosition().lng();
124 | $scope.myInfoWindow.open($scope.myMap, marker);
125 | };
126 |
127 | $scope.setMarkerPosition = function(marker, lat, lng) {
128 | marker.setPosition(new google.maps.LatLng(lat, lng));
129 | };
130 | }]);
131 | Remember that you can pass a variable containing an object to ui-event