<div ng-controller="MyCtrl">
<div class="row">
<div class="col-sm-12">
<ui-gmap-google-map
id="map-canvas"
center="map.center"
zoom="map.zoom"
draggable="true"
options="map.options"
control="map.control"
events="map.events"
>
<ui-gmap-marker ng-repeat="m in map.markers" idkey='m.id'
coords="m" click="onMarkerClicked(m)">
<ui-gmap-window show="m.showWindow"
closeClick="closeClick(m)"
templateUrl="m.templateUrl"
templateParameter="m.templateParameter"
>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
</div>
</div>
(assets/templates/addr.html)
<div>
<strong>Address</strong>
<div>
{{ parameter.message }}
</div>
</div>
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'
});
}]
);
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: 15,
control: {},
events: {
click: function (map, eventName, originalEventArgs) {
addLatLng(map, eventName, originalEventArgs);
}
},
markers: [],
}
});
var n = 0;
function addLatLng(map, eventName, originalEventArgs) {
var infowindow = new google.maps.InfoWindow();
var e = originalEventArgs[0];
var geocoder;
geocoder = new google.maps.Geocoder();
var lat = parseFloat(e.latLng.lat());
var lng = parseFloat(e.latLng.lng());
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
n++;
var marker = {
id: n,
latitude: lat,
longitude:lng,
showWindow: false,
templateUrl: 'assets/templates/addr.html',
templateParameter: {
message: results[0].formatted_address
}
}
$scope.map.markers.push(marker);
$scope.$apply();
} else {
alert('No results found');
}
} else {
alert('Geocoder failed due to: ' + status);
}
});
}
$scope.closeClick = function (marker) {
marker.showWindow = false;
};
$scope.onMarkerClicked = function (marker) {
marker.showWindow = true;
};
uiGmapGoogleMapApi.then(function(maps) {});
}]);