AngularUI - Google Maps - map undefined
I am trying to use the GoogleMaps directive like this:
Controller methods
$scope.myMarkers = [];
$scope.mapOptions = {
center : new google.maps.LatLng(35.784, -78.670),
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
$scope.addMarker = function($event) {
$scope.myMarkers.push(new google.maps.Marker({
map : $scope.myMap,
position : $event.latLng
}));
};
UpdateLocation.html
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div>
<div id="map_canvas" ui-map="myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div>
The map is shown fine, but in the method addMarker
I get undefined when executed $scope.myMap
.
source to share
I assume that you have a new area created somewhere between your controller definition and the div ui-map
, and what is happening is that the "myMap" property is created in that scope and not in the scope of your controller.
To avoid such problems, provide the ui-map
correct model for the directive . For example:
Controller:
$scope.model = { myMap: undefined };
HTML:
<div id="map_canvas" ui-map="model.myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div>
This will force the directive ui-map
to store the contents of the map internally $scope.model.myMap
and due to prototypal scopes inheritance, the object $scope.model
will be available in child scopes, but will always belong to the parent scopes - your controller scopes.
source to share