Cannot set property 'opacity' of undefined in gmap-window

Question

getting following error as Cannot set property 'opacity' of undefined

HTML and Js as following

<ui-gmap-window show="map.infoWindow.show" coords="map.infoWindow.center" options="map.infoWindow.options"></ui-gmap-window>

$scope.map.infoWindow.options.content = "<h1>....<div>....</div></h1>";

and got the root cause

we should not use content obj inside the infoWindow Options from

AngularJS Google Map Directive - Error while displaying InfoWindow on Marker Click event

So tried from above stack

<ui-gmap-window show="map.infoWindow.show" coords="map.infoWindow.center" options="map.infoWindow.options">
                            {{ infoWindowContent }}
                        </ui-gmap-window>

$scope.infoWindowContent = "<h1>....<div>....</div></h1>";

Here, able to solve that console error. but html is not rendering. Showing Plain html string( Not converting into DOM )

Is there any way to solve this issue?

score 1 · Accepted Answer · answered Feb 20 '17 at 16:45

Since ng-bind-html directive does not seem to work properly with google.maps.InfoWindow, for example setting content property ui-gmap-window directive:

<ui-gmap-window show="infoWindow.show" coords='infoWindow.coords'>
          <div ng-bind-html="{{infoWindow.content}}"></div>
</ui-gmap-window>

will cause the error that you have experienced.

But you could consider to introduce a custom directive to display InfoWindow content as html:

.directive('toHtml', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function link($scope, $element, attrs) {
                attrs.$observe('toHtml', function (value) {
                    if (value.length > 0) {
                        var $el = $compile(value)($scope);
                        $element.empty().append($el)
                    }
                })
            }
        }
    }])

and then bind html content:

<ui-gmap-window show="infoWindow.show" coords='infoWindow.coords'>
          <div to-html="{{infoWindow.content}}"></div>
</ui-gmap-window>

Example

angular.module('MapApp', ['uiGmapgoogle-maps'])

  
    .directive('toHtml', ['$compile', function ($compile) {
        return {
            restrict: 'A',
            link: function link($scope, $element, attrs) {
                attrs.$observe('toHtml', function (value) {
                    if (value.length > 0) {
                        var $el = $compile(value)($scope);
                        $element.empty().append($el)
                    }
                })
            }
        }
    }])

    .controller('MapCtrl', function ($scope, uiGmapGoogleMapApi, uiGmapIsReady) {

        $scope.map = {
            zoom: 4,
            bounds: {},
            center: {
                latitude: 40.1451,
                longitude: -99.6680
            },
            options: {}
        };

        $scope.infoWindow = {
            show: false,
            content: '',
            coords: {}
        };


        $scope.markers = [
            {
                latitude: 40.705565,
                longitude: -74.1180857,
                title: "New York",
                id: 1,
            },
            {
                latitude: 37.7576948,
                longitude: -122.4726193,
                title: "San Fransisco",
                id: 2,
            }
        ];

        uiGmapGoogleMapApi.then(function (maps) {

            $scope.showInfoWindow = function (marker, eventName, model) {
                $scope.infoWindow.coords.latitude = model.latitude;
                $scope.infoWindow.coords.longitude = model.longitude;
                $scope.infoWindow.content = "<h2>" + model.title + "</h2>";
                $scope.infoWindow.show = true;
            };

            $scope.closeInfoWindow = function () {
                $scope.infoWindow.show = false;
            };

        });
    });

.angular-google-map-container {
 height: 30em;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="https://rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-maps/2.2.1/angular-google-maps.js"></script> 
 
 <div ng-app="MapApp" ng-controller="MapCtrl">
        <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="false" options="map.options" bounds="map.bounds">
            <ui-gmap-window show="infoWindow.show" coords='infoWindow.coords' closeClick="closeInfoWindow()">
                <div to-html="{{infoWindow.content}}"></div>
            </ui-gmap-window>
            <ui-gmap-markers models="markers" coords="'self'" options="'options'"  click="showInfoWindow">
            </ui-gmap-markers>
        </ui-gmap-google-map>
  </div>

Cannot set property 'opacity' of undefined in gmap-window

1 Answers1