Search code examples
angularjsgoogle-mapsng-map

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

Solution

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