AngularUI - Google Maps - map is undefined

Question

I am trying to use GoogleMaps directive this way:

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 perfectly but in method addMarker I am getting an undefined when $scope.myMap is executed.

bmleite · Accepted Answer · 2013-02-18 14:22:10Z

3

I believe you have a new scope being created somewhere between your controller definition and the ui-map div and what's happening is that the 'myMap' property is being created on that scope and not on your controller's scope.

To avoid this kind of problems, provide the ui-map directive a proper model. 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 ui-map directive to store the map content inside $scope.model.myMap and due to the prototypically inheritance of the scopes, the $scope.model object will be available on child scopes but will always belong to the parent scope - your controller's scope.

answered Feb 18, 2013 at 14:22

bmleite

26.9k4 gold badges74 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

qopuir Over a year ago

That worked!! Thank you very much!! I've wasted a lot of time with this problem. But I don't understand where a new scope is created. I am using angular-ui as documentation says

Collectives™ on Stack Overflow

AngularUI - Google Maps - map is undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related