I'm using https://github.com/allenhwkim/angularjs-google-maps. How to get all markers that have been created with the ng-repeat
. Is there any function inside map
instance, to access the created markers? I have this code:
<ng-map center="{{vm.searchParameters['hotel_city']}}" zoom="12" ng-if="vm.showMap" class="fx-fade-normal fx-dur-483 fx-ease-sine">
<marker ng-repeat="hotel in vm.listHotelsFiltered"
position="{{[hotel.position.latitude/100000, hotel.position.longitude/100000]}}"
data="{{hotel}}"
on-click="vm.markerMapHotelDetail()"
title="{{hotel.hotel_name}}">
</marker>
</ng-map>
Maybe something like this?
NgMap.getMap().then(function(map) { //Create the instance of map
vm.map = map;
var markers = vm.map.getMarkers(); //?
});
I would suggest looping through the data set in the controller and setting the bounds at that time. You can do this by using the 'extend' function of the google maps api.
Depending on your data set, the controller could look something like:
vm.positions = [];
$scope.po = [$scope.userSearchedLocation[0].dlat,$scope.userSearchedLocation[0].dlon];
//used for setting bounds of google map display
var bounds = new google.maps.LatLngBounds();
//get lat and long of location searched for setting initial marker
var latlng = new google.maps.LatLng($scope.userSearchedLocation[0].dlat, $scope.userSearchedLocation[0].dlon);
//used for centering map view
bounds.extend(latlng);
for (var i = 0; i < data.length; i++) {
//add data to array for ng-repeat when placing markers on map
vm.positions.push({
position: [data[i].dlat, data[i].dlon],
HotelName: data[i].HotelName,
});
var latlng = new google.maps.LatLng(data[i].dlat, data[i].dlon);
bounds.extend(latlng);//used for centering map view around bounds
}
Then in your Worker class for NgMap
NgMap.getMap().then(function(map) { //Create the instance of map
vm.map = map;
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
map.setZoom(4);
});
View would be something like
<marker ng-repeat="p in vm.positions"
position="{{p.position}}"
title="{{p.HotelName}}" id="{{p.id}}">
</marker>