I'm trying to add windows (info bubbles) to markers in an Angular Google Map. I'm using the Ionic Framework.
Markup:
<google-map
center="map.center"
zoom="map.zoom"
<marker
ng-repeat="marker in markers"
coords="marker"
<window
show="true"
templateUrl="templates/map-info-window.html">
</window>
</marker>
</google-map>
JS:
$scope.markers = [];
$scope.populateMarkers = function(locations) {
for (var i = 0; i < locations.length; i++) {
$scope.addMarker(locations[i].Latitude, locations[i].Longitude);
}
}
$scope.addMarker = function (lat, lng) {
$scope.markers.push({
latitude: parseFloat(lat),
longitude: parseFloat(lng)
});
}
I want to add a window
for each marker
. The Angular GoogleMaps documentation says you can include window
within a marker
to use its coordinates.
But the code above does not work. For each window
I try to add I get this error:
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.2.12/jqLite/nosel
at http://localhost:8888/anggmaps/www/lib/ionic/js/ionic.bundle.js:9007:12
at JQLite (http://localhost:8888/anggmaps/www/lib/ionic/js/ionic.bundle.js:11072:13)
at compile (http://localhost:8888/anggmaps/www/lib/ionic/js/ionic.bundle.js:14439:25)
at WindowChildModel.buildContent (http://localhost:8888/anggmaps/www/lib/angular-google-maps/dist/angular-google-maps.js:491:24)
at WindowChildModel.createWindowOptions (http://localhost:8888/anggmaps/www/lib/angular-google-maps/dist/angular-google-maps.js:471:29)
at WindowChildModel.createGWin (http://localhost:8888/anggmaps/www/lib/angular-google-maps/dist/angular-google-maps.js:1901:30)
at WindowChildModel.createGWin (http://localhost:8888/anggmaps/www/lib/angular-google-maps/dist/angular-google-maps.js:1822:63)
at new WindowChildModel (http://localhost:8888/anggmaps/www/lib/angular-google-maps/dist/angular-google-maps.js:1856:16)
at http://localhost:8888/anggmaps/www/lib/angular-google-maps/dist/angular-google-maps.js:3898:24
at http://localhost:8888/anggmaps/www/lib/ionic/js/ionic.bundle.js:22538:28 ionic.bundle.js:18364
(anonymous function) ionic.bundle.js:18364
(anonymous function) ionic.bundle.js:15775
(anonymous function) ionic.bundle.js:22541
completeOutstandingRequest ionic.bundle.js:13040
(anonymous function)
It happens as I push the windows into the $scope.windows array, but it only throws that error after all windows are pushed into the array, I don't know which moment precisely.
Thank you
UPDATE
I updated the above code, now it seems to be right, because (please correct me if I'm wrong):
I don't need to have a $scope.windows array. Each marker
directive has a window
directive inside of it, so It's already there - it's not like markers in marker
, where I should populate the markers array, for the ng-repeat directive to iterate through them.
Now, I still get the error. What's wrong?
ps:
I loaded jQuery to see if that was the problem, but then it gave me a different, probably unrelated error:
Error: [$compile:ctreq] Controller 'ionTabs', required by directive 'ngClass', can't be found!