angular-ui / angular-google-maps

AngularJS directives for the Google Maps Javascript API
http://angular-ui.github.io/angular-google-maps
2.52k stars 1.07k forks source link

Many Markers 1 infowindow- HTML content set in Window.Options, works great, but triggers a Uncaught TypeError: #1703

Open jamestb2 opened 8 years ago

jamestb2 commented 8 years ago

Map is as follows:

    </div>

relevant js controller: this is after a promise.

        $scope.map = {
            center: {
                latitude: 26.6406,
                longitude: -81.8723
            },
            zoom: 13,
            maxZoom: 100,
            markers: $scope.markers, // array of models to display
            markersEvents: {
                click: function (marker, eventName, model, arguments) {
                    $scope.map.window.model = model;                        
                    $scope.map.window.options.content = model.data;
                    $scope.map.window.options.disableAutoPan = false;
                    $scope.map.window.show = true;
                }
            },
            window: {
                marker: {},
                show: false,
                closeClick: function () {
                    this.show = false;
                },
                options: {} // define when map is ready
            }
        };

    });

    uiGmapIsReady.promise(1).then(function (instances) {
        instances.forEach(function (inst) {
            var map = inst.map;
            var uuid = map.uiGmap_id;
            var mapInstanceNumber = inst.instance; // Starts at 1.
            map.setMapTypeId(google.maps.MapTypeId.HYBRID);
            //map.setZoom(19);
        });
    });

    $scope.height = "300";
    $scope.adaptHeight = function () {
        var mapwidth = $("#map").width();
        if (mapwidth <= 500 && mapwidth > 0) {
            $("#map").css("height", "300px");
            $(".vehicle-detail-container-bg").css("margin", "0");
        } else if (mapwidth <= 800 && mapwidth > 500) {
            $scope.height = "450";
            $("#map").css("height", "450px");
            $(".vehicle-detail-container-bg").css("margin", "40px");
        } else {
            $scope.height = "600";
            $("#map").css("height", "600px");
            $(".vehicle-detail-container-bg").css("margin", "40px");
        }
    };
    $scope.$on('$viewContentLoaded', function () {
        var mapHeight = $scope.height; // or any other calculated value
        if ($(".angular-google-map-container")[0]) {
            // Do something if class exists
            $(".angular-google-map-container").height(mapHeight);
        }
    });

Setting my HTML via Window Options.Content and works excellent. No complaints on the functionality. I get multiple markers and 1 window at a time.

I get the error below in the console with each info window opening that I do- Please advise.. And no I don't have a Plunkr - heck just heard of it, been doing anguilar by the manuals and directives I could find, never found a Plunkr that helped my situation :)

Uncaught TypeError: Cannot set property 'opacity' of undefinedmaybeRepaint @ angular-google-maps.min.js?version=2.1:6(anonymous function) @ angular-google-maps.min.js?version=2.1:6.I.trigger @ js?Client=gme-lojack&v=3.22&callback=initialize:86.m.trigger @ infowindow.js:8(anonymous function) @ infowindow.js:5.I.trigger @ js?Client=gme-lojack&v=3.22&callback=initialize:86(anonymous function) @ util.js:52.m.yj @ common.js:237

Glad I found this directive, I really like it, cuts down on hand coding for sure! Thanks, James B

jamestb2 commented 8 years ago

// div id="map" style="width: 100%;height: 600px;" // ui-gmap-google-map center="map.center" zoom="map.zoom" pan="0" // ui-gmap-window show="map.window.show" coords="map.window.model.coords" //options="map.window.options" closeclick="map.window.closeClick()"
// div /div
// /ui-gmap-window // ui-gmap-markers id="srchMap" idkey="id" models="markers" coords="'coords'" //fit="true" events="map.markersEvents" /ui-gmap-markers ///ui-gmap-google-map
// /div

I am sorry for not understanding this is my first time ever entering an issue, I usually can solve them on my own. this one is just not making sense to me

jamestb2 commented 8 years ago

I did not know how to let me paste in the html so I removed the brackets after commenting and that not working nice work on the directive