i am using ngmaps () 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?

i am using ngmaps (https://github./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?

• javascript
• angularjs
• google-maps
• infowindow

3 Answers 3

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

remove the ng-non-bindable directive from your div

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

The ngNonBindable directive tells Angular not to pile 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.

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']);
  };