jsp:
<div class="modal-body viewOnMap">
<div class="cboxClose" ng-click="fn.close()">close</div>
<div class="mgt-20">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds" >
<ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="'onClicked'" >
<ui-gmap-windows show="showWindow">
<div ng-controller="infoWindowCtrl">
<a ng-click="showInfo()">Contact Info</a><hr class="mgt-5 mgb-5" ng-non-bindable/>
<a ng-click="showInfo()">Contact Address</a><hr class="mgt-0 mgb-5" ng-non-bindable/>
<a ng-click="showInfo()">Other</a>
<!--<span ng-click="showInfo()">Contact Info</span><hr class="mgt-0 mgb-0" ng-non-bindable/>
<span ng-click="showInfo()">Contact Address</span><hr class="mgt-0 mgb-0" ng-non-bindable/>
<span ng-click="showInfo()">Other</span>-->
</div>
</ui-gmap-windows>
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
</div>
js:
.controller('viewOnMapInfoCtrl',['$scope','$rootScope','NiHttp','NiDialog','$timeout','order','latlng','uiGmapIsReady',function($scope,$rootScope,NiHttp,NiDialog,$timeout,order,latlng,uiGmapIsReady){
var vm = $scope.vm = {};
var fn = $scope.fn = {};
fn.close=function(){
NiDialog.close();
}
if(order!=null && latlng==null){
var srcOpt = {
url: '/orderHistory/findLeadsByOrderCode',
data: {orderCode:order.orderCode}
};
NiHttp.postForm(srcOpt)
.success(function(data){
console.log(_.uniq(_.pluck(data.result,'coordinate')));
vm.coordinate=_.uniq(_.pluck(data.result,'coordinate'));
})
}
if(order==null && latlng!=null){
vm.coordinate=latlng;
}
$timeout(function () {
$scope.map = {
center: {
latitude: latlng[0].split(',')[0],
longitude: latlng[0].split(',')[1]
},
zoom: 13,
bounds: {}
};
$scope.options = {
scrollwheel: true
};
var createRandomMarker = function(i, bounds,latitude,longitude,idKey) {
if (idKey == null) {
idKey = "id";
}
var ret = {
latitude: latitude,
longitude: longitude,
title: 'm' + i,
showWindow: false,
coords: {
latitude: latitude,
longitude: longitude
},
};
ret[idKey] = i;
return ret;
};
$scope.randomMarkers = [];
// Get the bounds from the map once it's loaded
$scope.$watch(function() {
return $scope.map.bounds;
}, function(nv, ov) {
// Only need to regenerate once
if (!ov.southwest && nv.southwest) {
var markers = [];
_.forEach(vm.coordinate,function(item,key){
var latlng=item.split(',');
console.log(latlng);
markers.push(createRandomMarker(key, $scope.map.bounds,latlng[0],latlng[1]));
})
$scope.randomMarkers = markers;
}
}, true);
_.each($scope.randomMarkers, function (marker) {
marker.closeClick = function () {
marker.showWindow = false;
$scope.$apply();
};
marker.onClicked = function () {
$scope.onMarkerClicked(marker);
};
});
}, 0);
var markerToClose = null;
$scope.onMarkerClicked = function (marker) {
markerToClose = marker; // for next go around
marker.showWindow = true;
$scope.$apply();
};
}])
.controller('infoWindowCtrl', function($scope) {
$scope.showInfo = function() {
console.log('Button clicked!');
}
})