CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsinfowindow
beiHirn
beiHirn

Reputation: 31

AngularJS ngmap passing scope variable to infoWindow

i am using ngmaps (https://github.com/allenhwkim/angularjs-google-maps) to dynamically load markers and infoWindows in my application.

in my view it looks like this:

<marker
    data-ng-repeat="ltd in ltds"
    data-position="{{ltd.gps}}"
    data-title="{{ltd.code}}"
    data-draggable="false"
    data-visible="true"
    data-icon="images/marker.png"
    data-on-click="showInfoWindow(event, ltd.code)">
</marker>

<info-window data-ng-repeat="ltd in ltds" id="{{ltd.code}}" data-position="{{ltd.gps}}" data-ltd="{{ltd}}">
    <div ng-non-bindable>
        <div class="infoWindow">
            <div class="content">code: {{ltd.code}}</div>
        </div>
    </div>
</info-window>

But in the infoWindow content {{ltd.code}} is not shown. what am i doing wrong?

Upvotes: 2

Views: 4674

Answers (3)

Sebasti&#225;n Rojas
Sebasti&#225;n Rojas

Reputation: 2891

I found this way:

Template:

<marker ng-repeat="marker in markers" position="{{marker.location.latitude}}, {{marker.location.longitude}}" on-click="showDetails(event, marker.id)"></marker>
              <info-window id="details">
                <div ng-non-bindable="">
                  <h4>Aja {{ecopoint.name}}</h1>
                  <p>{{ecopoint.details}}</p>
                  <a ng-click="next(ecopoint)" translate>Seleccionar</a>
                </div>
              </info-window>

Controller:

    $scope.showDetails = function(evt, id) {

    var ecopointSearch = $filter('filter')($scope.markers, { id: id });

    $scope.ecopoint = ecopointSearch[0];

    $scope.showInfoWindow.apply(this, [evt, 'details']);
  };

Upvotes: 1

Lucas L Roselli
Lucas L Roselli

Reputation: 2830

The solution above didn't worked for me, I think it has something about the ng map version

So I wrote my on solution: http://plnkr.co/edit/eEE9tX4PlDstCeiQI6x2?p=preview 

     $scope.showInfoWindow = function (event, p) {
        var infowindow = new google.maps.InfoWindow();
        var center = new google.maps.LatLng(p[0],p[1]);

        infowindow.setContent(
            '<h3>' + p + '</h3>');

        infowindow.setPosition(center);
        infowindow.open($scope.objMapa);
     };`

I create the info window on a click event, then I have full control of the info window

Upvotes: 6

Marian Ban
Marian Ban

Reputation: 8188

remove the ng-non-bindable directive from your div

from documentation https://docs.angularjs.org/api/ng/directive/ngNonBindable:

The ngNonBindable directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular. This could be the case if you have a site that displays snippets of code, for instance.

Upvotes: 2

Related Questions