google maps shows gray overlays on update

Question

Good Morning,

I got some nasty trouble with google map api.

I know there are some other thread with a similar problem. But they did not really help to understand my problem.

I am working with yeoman in a angular.js 1.5 gulp project with angular-materials and need a map implementation where the marker changes by router.

For example: I got links like this: http://myurl.de/#/expertise/1 http://myurl.de/#/expertise/2

If I use them in a new window, my map is well. But if I change the number at the end, my map got those grey areas (looks like the map size is not set to 100% of my DIV element)

Implementation off my HTML Direktive

Implementation of my map service

(function() {
    'use strict';

    angular
        .module('espanioYoNg')
        .service('googleMapService', googleMapService);

    /** @ngInject */
    function googleMapService($window, $q) {
        var deferred = $q.defer();

        // Load Google map API script
        function loadScript() {
            // Use global document since Angular's $document is weak
            var script = document.createElement('script');
            script.src = '//maps.googleapis.com/maps/api/js?key=AIzaSyD42GBUhIFSTDEwcTSsM_xIh07B2RATEB4&sensor=false&language=en&callback=initMap';
            //script.src = '//maps.googleapis.com/maps/api/js?sensor=false&language=en&callback=initMap';

            document.body.appendChild(script);
        }

        // Script loaded callback, send resolve
        $window.initMap = function () {
            deferred.resolve();
        }

        loadScript();

        return deferred.promise;
    }

})();

My map directive and controller

(function() {
    'use strict';

    angular
        .module('espanioYoNg')
        .directive('googleMap', ['googleMapService', googleMap]);

    /** @ngInject */
    function googleMap(googleMapService) {
        return {
            restrict: 'C', // restrict by class name
            scope: {
                mapId: '@id',   // map ID
                lat: '@',       // latitude
                long: '@',      // longitude
                zoom: '@'       // zoom on card
            },
            link: function( $scope, elem ) {

                // Check if latitude and longitude are specified
                if ( angular.isDefined($scope.lat) && angular.isDefined($scope.long) && angular.isDefined($scope.zoom) ) {



                    // Initialize the map
                    $scope.initialize = function() {
                        $scope.location = new google.maps.LatLng($scope.lat, $scope.long);

                        $scope.mapOptions = {
                            zoom: 14, //$scope.zoom,
                            center: $scope.location
                        };

                        $scope.map = new google.maps.Map(document.getElementById($scope.mapId), $scope.mapOptions);

                        new google.maps.Marker({
                            position: $scope.location,
                            map: $scope.map,
                        });
                    }

                    // Loads google map script
                    googleMapService.then(function () {
                        // Promised resolved
                        $scope.initialize();

                    }, function () {
                        // Promise rejected
                    });
                }
            }
        };
    }

})();

I am searching for the problem over the whole day. Seems like CSS but I am not realy sure.

If necessary, you can have a look at it, here: http://test.espanio.de/#/expertise/1 http://test.espanio.de/#/expertise/2

user: espanio

pass: oinapse

credentials are temporary to prevent search engines crawling the page before it is finished.

Afer Refreshing/Reloading (F5 on windows) the map is as it should be.

And I am sorry for the lines of code, but I didn't get the plunker running with my whole project.

Thanks for any help,.... n00n from germany...

xomena · Accepted Answer

I think the issue is related to the size of the div when you initialize a map. When I open your page in the new window and put breakpoint on $scope.initialize(); I can see the following

Now if I change the URL in the browser I can see the following

Note the change in the div width during the second initialization. I believe you should trigger a resize event on the map when the map finished initialization and div size changed. Try the following

googleMapService.then(function () {
    // Promised resolved
    $scope.initialize();
    setTimeout(function(){
        google.maps.event.trigger($scope.map, 'resize'); 
    }, 1000);
}, function () {
    // Promise rejected
});

google maps shows gray overlays on update

Answers (1)

Related Questions