angularjs - Angular Google Maps "Marker" directive not working -
building website has 2 different google maps on same page. maps load fine. im trying add markers maps, , keep getting error."markersparentmodel: no valid models attribute "
my controller :
angular.module('footstoreapp') .controller('contactpagectrl', function ($scope, uigmapgooglemapapi) { uigmapgooglemapapi.then(function(maps) { }); $scope.map = { center: { latitude: 32.830593, longitude: -79.825432 }, zoom: 14 }; $scope.marker = { id: 1, coords: { latitude: 32.830593, longitude: -79.825432 }, }; $scope.map2 = { center: { latitude: 32.863488, longitude: -80.023833 }, zoom: 14 }; $scope.marker2 = { id: 2, coords: { latitude: 32.863488, longitude: -80.023833 } } });
the directives :
<div> <ui-gmap-google-map center='map.center' zoom='map.zoom'><ui-gmap-markers idkey='marker.id' coords='marker.coords'> </ui-gmap-markers></ui-gmap-google-map> </div> <ui-gmap-google-map center='map2.center' zoom='map2.zoom'><ui-gmap-markers idkey='marker2.id' coords='marker2.coords'> </ui-gmap-markers></ui-gmap-google-map>
you have used ui-gmap-markers
directive instead of ui-gmap-marker
.
see documentation (http://angular-ui.github.io/angular-google-maps/#!/api). there 2 directives (marker , markers).
corrected code:
var myapp = angular.module('myapp', ['uigmapgoogle-maps']); myapp.controller('myctrl1', function ($scope, uigmapgooglemapapi) { uigmapgooglemapapi.then(function (maps) { $scope.map = { center: { latitude: 32.830593, longitude: -79.825432 }, zoom: 14 }; $scope.marker = { id: 1, coords: { latitude: 32.830593, longitude: -79.825432 } }; $scope.map2 = { center: { latitude: 32.863488, longitude: -80.023833 }, zoom: 14 }; $scope.marker2 = { id: 2, coords: { latitude: 32.863488, longitude: -80.023833 } } }); })
.angular-google-map-container { height: 400px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.1.1/angular-google-maps.min.js"></script> <div ng-app="myapp"> <div ng-controller="myctrl1"> <ui-gmap-google-map center='map.center' zoom='map.zoom'> <ui-gmap-marker idkey='marker.id' coords='marker.coords'></ui-gmap-marker> </ui-gmap-google-map> <hr/> <ui-gmap-google-map center='map2.center' zoom='map2.zoom'> <ui-gmap-marker idkey='marker2.id' coords='marker2.coords'></ui-gmap-marker> </ui-gmap-google-map> </div> </div>
Comments
Post a Comment