Struggling with modifying an Angular Model from a GMaps event, here is the code snippet causing the issue:
function CtrlGMap($scope) {
var mapOptions = {
center: new google.maps.LatLng(-54.798112, -68.303375),
zoom: 11,
//disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
google.maps.event.addListener(map, "click", function(e) {
lat = e.latLng.lat();
lng = e.latLng.lng();
$scope.lat = lat;
)};
HTML:
<body ng-controller="CtrlGMap">
<div id="mapCanvas"></div>
<form role="form" style="width: 30%; margin:0 auto;">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="lat">Latitude</label>
<div class="input-group">
<span class="input-group-addon">Lat</span>
<input type="text" class="form-control" id="lat" ng-model="lat" disabled>
</div>
</div>
</div>
</form>
Curious why there's no access to $scope within the GMap event. Any ideas?