in3pi2 in3pi2 - 3 months ago 24
AngularJS Question

How to get existing markers froms the map in "ng-map"

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(); //?
});

Answer

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>
Comments