var mapApp = angular.module('googleMapApp', ['uiGmapgoogle-maps']);
mapApp.config(
['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
GoogleMapApiProviders.configure({
key: 'your Google Map api key',
v: '3', //defaults to latest 3.X anyhow
libraries: 'weather,geometry,visualization,places'
});
}]
);
mapApp.controller("MyCtrl",['$scope', 'uiGmapGoogleMapApi', function ($scope,uiGmapGoogleMapApi) {
angular.extend($scope, {
map: {
center: {
latitude: 35.681382,
longitude: 139.766084
},
options: {
maxZoom: 20,
minZoom: 3
},
zoom: 16,
control: {},
markers: []
},
place: {},
result: ''
});
$scope.placeSearch = function (place) {
var request = {
location: {
lat: $scope.map.center.latitude,
lng: $scope.map.center.longitude
},
radius: place.radius,
query: place.query
};
var map = $scope.map.control.getGMap();
var service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
return;
};
var callback = function (results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i],i);
}
}
}
var createMarker = function (place,id) {
$scope.map.markers.push({
id: id,
latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng(),
showWindow: false,
name: place.name,
templateUrl: 'assets/templates/place.html',
templateParameter: {
message: place.name
}
});
$scope.$apply();
}
$scope.closeClick = function (marker) {
marker.showWindow = false;
};
$scope.onMarkerClicked = function (marker) {
marker.showWindow = true;
};
$scope.removeMarkers = function () {
$scope.map.markers.length = 0;
};
uiGmapGoogleMapApi.then(function(maps) {});
}]);
(assets/templates/place.html)
<div>
<strong>Place</strong>
<div>
{{ parameter.message }}
</div>
</div>