javascriptangularjsgoogle-mapsangularjs-ng-repeatng-map

Ngmap select ng-repeat marker from javascript


I am using https://github.com/allenhwkim/angularjs-google-maps directive in my project

Following is a code sample in which markers are drawn on the map

<map id="map" style="height:450px" zoom="4" zoom-to-include- markers='auto' center="{[{center.lat}]},{[{center.long}]}" on-center-changed="centerChanged()">
<marker id={[{$index}]} animation="DROP" ng-repeat="location in locations" position="{[{location.latitude}]},{[{location.longitude}]}" on-click="click()" title="Click to zoom"></marker> 

</map>

I now have to select these markers from a javascript function. Selecting marker by id gives marker as a dom element as shown below

<marker id="1" animation="DROP" ng-repeat="location in locations" position="10.0050407,76.3459498" on-click="click()" title="Click to zoom" class="ng-scope"></marker>

instead of google maps marker object

Is there someway i can select marker initialised through ng-repeat as a google maps marker object from javascript?


Solution

  • You can get the Marker object by using angular's scope. I don't see your JS code but from Angularjs-Google-Maps example each marker can be referred to by $scope.map.markers[key] where $scope.map.markers is the array of markers in your scope.

    var app=angular.module('myapp', ['ngMap']);
    app.controller('MarkerRemoveCtrl', function($scope) {
      $scope.positions = [{lat:37.7699298,lng:-122.4469157}];
      $scope.addMarker = function(event) {
        var ll = event.latLng;
        $scope.positions.push({lat:ll.lat(), lng: ll.lng()});
      }
      $scope.deleteMarkers = function() {
        $scope.positions = [];
      };
      $scope.showMarkers = function() {
        for (var key in $scope.map.markers) {
          $scope.map.markers[key].setMap($scope.map);
        };
      };
      $scope.hideMarkers = function() {
        for (var key in $scope.map.markers) {
          $scope.map.markers[key].setMap(null);
        };
      };
    });