I'm very new with Angular so don't even know if what I'm trying to do is the right thing here. If not, please point me in the right direction.
What I want to do:
I'm using JSON to get external map data as well as angular-google-maps to load in data. My JSON has about 100 places, with names, latitudes and longitudes. I want to use Angular to loop through that data and place markers on my map for each place.
HTML
<body ng-controller="ExampleController">
<input type="text" ng-model="data.message">
<li class="places" ng-repeat="place in places">
<p class="link">{{place.name}}</p>
<p>{{place.lat}}</p>
<p>{{place.lng}}</p>
<div class="google-map"
center="centerProperty"
zoom="zoomProperty"
markers="markersProperty"
latitude="clickedLatitudeProperty"
longitude="clickedLongitudeProperty"
mark-click="true"
draggable="true"
style="height: 500px; width: 80%; ">
</div>
</li>
</body>
Javascript
(function () {
var module = angular.module("angular-google-maps-example", ["google-maps"]);
}());
function ExampleController ($scope, $http) {
$http.get('json/map-data.json').success(function(data) {
$scope.places = data;
});
angular.extend($scope, {
/** the initial center of the map */
centerProperty: {
lat: 45,
lng: -73
},
/** the initial zoom level of the map */
zoomProperty: 8,
/** list of markers to put in the map */
markersProperty: [ {
latitude: 45,
longitude: -74
}],
// These 2 properties will be set when clicking on the map
clickedLatitudeProperty: null,
clickedLongitudeProperty: null,
});
}
Why it's not working
Obviously I'm a little over my head, I'm TRYING to find a way to get {{place.lat}} and {{place.lng}}into the markersProperty: in the Javascript. Can I somehow push these values into the markersProperty array? What's the best way to achieve this?