Using Ngmap to dynamically display markers using ng-repeat in JavaScript

Question

Using Ngmap to dynamically display markers using ng-repeat in JavaScript

In my project, I am utilizing the angularjs-google-maps directive for map functionality.

Below is a snippet of code demonstrating how markers are added to 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>

My challenge now is how to select these markers from a javascript function. When selecting a marker by ID, it returns as a DOM element instead of a Google Maps marker object as illustrated 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>

Is there a way for me to access markers initialized through ng-repeat as Google Maps marker objects within JavaScript?

javascript angularjs google-maps angularjs-ng-repeat ng-map

Answer 1

Answer №1

To access the Marker object, you can utilize angular's scope feature. Without viewing your specific JS code, I recommend checking out the Angularjs-Google-Maps example. In this example, each marker can be accessed using $scope.map.markers[key], where $scope.map.markers represents the array of markers within your scope.

angular.module('myApp', ['ngMap'])
.controller('MarkerCtrl', function($scope) {
  $scope.points = [{lat:37.7699298, lng:-122.4469157}];
  
  $scope.addMarker = function(event) {
    var coordinates = event.latLng;
    $scope.points.push({lat: coordinates.lat(), lng: coordinates.lng()});
  }
  
  $scope.removeMarkers = function() {
    $scope.points = [];
  };

  $scope.displayMarkers = 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);
    };
  };
});

Answer 2

To access the Marker object, you can utilize angular's scope feature. Without viewing your specific JS code, I recommend checking out the Angularjs-Google-Maps example. In this example, each marker can be accessed using $scope.map.markers[key], where $scope.map.markers represents the array of markers within your scope.

angular.module('myApp', ['ngMap'])
.controller('MarkerCtrl', function($scope) {
  $scope.points = [{lat:37.7699298, lng:-122.4469157}];
  
  $scope.addMarker = function(event) {
    var coordinates = event.latLng;
    $scope.points.push({lat: coordinates.lat(), lng: coordinates.lng()});
  }
  
  $scope.removeMarkers = function() {
    $scope.points = [];
  };

  $scope.displayMarkers = 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);
    };
  };
});

Using Ngmap to dynamically display markers using ng-repeat in JavaScript

Answer №1

Similar questions

Async/await transformation in Node.js

Guide to incorporating navigation buttons (back and forward) in a modal box

Unclear error message encountered with Rails server

Inquiries about utilizing setTimeout with backbone.js and effectively managing timeouts

The res.send() method in Restify was not triggered within the callback function of an event

"Following successful POST login and session storage in MongoDB, the session is unable to be accessed due

JavaScript error: Unable to access property `node` as it is null or does not exist

Obtaining the sum of two variables from two separate functions results in a value of NaN

What sets apart these two JavaScript namespaces?

Is it possible to include a value for the "src" attribute rather than the "class" attribute in the array of values in list.js?

Using orchestrate.js for local passport.js authentication

AngularJS Splice Function Used to Remove Selected Items from List

Utilize AngularJS to effortlessly filter and search data

Effective methods for eliminating timezone in JavaScript

The initial ajax request successfully connects to the file, but encounters a 404 error upon the second attempt

Ui-router experiencing issues with nested view loading due to changes in URL

Ways to prevent scrolling or switching to the next tab when my javascript function yields a false result

When the Protractor configuration is executed, it displays the message "The requested webpage cannot be accessed."

Transferring data to a web address

Encountering "Unexpected token *" error when using Jest on an import statement