Occasionally, the map may take a moment to fully load

Question

Occasionally, the map may take a moment to fully load

Update: Resolving the issue involved directly calling these two methods on the map object:

leafletData.getMap().then(function(map)
{
    map.invalidateSize();
    map._onResize();
});

Encountering a minor yet bothersome problem with the Leaflet directive for AngularJS (https://github.com/angular-ui/ui-leaflet) and Google Maps plugin (https://github.com/shramov/leaflet-plugins).

At times, markers load fine but the map fails to display. A simple page refresh resolves it temporarily...

Screenshots provided below (captured on mobile but issue persists across desktop browsers):

https://i.stack.imgur.com/nONjB.png

Occasionally the map loads eventually but without proper bounds set:

https://i.stack.imgur.com/OGeOG.png

Desired appearance (achieved most of the time):

https://i.stack.imgur.com/rXmnk.png

Template:

<div class="stations-map" ng-controller="mapCtrl" ng-show="mapObj.visible">
        <leaflet layers="mapObj.layers" lf-center="mapObj.center" bounds="mapObj.bounds" markers="mapObj.markers" height="480px" width="100%"></leaflet>
    </div>

Controller:

app.controller("mapCtrl", ['$scope', '$filter', 'propertyService', 'groupService', 'leafletBoundsHelpers', function ($scope, $filter, propertyService, groupService, leafletBoundsHelpers){
var properties = null;

var mapObj = {

    center: {},
    bounds: [],
    markers: {},

    layers: {

        baselayers:
        {
            googleRoadmap: {name: 'Google Streets', layerType: 'ROADMAP', type: 'google'}
        }

    },

    visible: false

};

...

$scope.$on('data-switched', function()
{
    resetMapAndHide();
    $scope.mapObj = mapObj;
});}]);

Appreciate any advice or pointers! Thank you.

javascript angularjs google-maps leaflet angular-leaflet-directive

Answer 1

Answer №1

When encountering issues with Google Maps, I found that a resizing problem was at the root of it. By triggering a Resize event, I was able to successfully resolve the issue. Perhaps this approach could help you as well.

$scope.initializeMaps = function(test){
            if(test.gps){
                var arrLatLng = test.gps.split(',');
                var latlng = new google.maps.LatLng(arrLatLng[0], arrLatLng[1]);
            } else {
                var latlng = new google.maps.LatLng(37.42224,-122.0883822);
            }

            var myOptions = {
                zoom: 9,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),
                myOptions);

            var input = document.getElementById('maps-input');
            var searchBox = new google.maps.places.SearchBox(input);

            map.addListener('click', function (e) {
                placeMarker(e.latLng, map, test);
            });

            map.addListener('bounds_changed', function () {
                searchBox.setBounds(map.getBounds());

            });

            // TRIGGER RESIZE EVENT TO RENDER MAP
            $timeout(function(){
                google.maps.event.trigger(map, 'resize');
                if (marker && test.marker) {
                    map.setCenter(marker.getPosition());
                }
            },1);

        };
        
        var marker;

        function placeMarker(location, map, test) {
            $scope.$apply(function () {
                test.gps = location.lat() + "," + location.lng();

            });

            if (marker && test.marker) {
                marker.setPosition(location);

            } else {
                marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
            }
            test.marker = true;
        };

Answer 2

When encountering issues with Google Maps, I found that a resizing problem was at the root of it. By triggering a Resize event, I was able to successfully resolve the issue. Perhaps this approach could help you as well.

$scope.initializeMaps = function(test){
            if(test.gps){
                var arrLatLng = test.gps.split(',');
                var latlng = new google.maps.LatLng(arrLatLng[0], arrLatLng[1]);
            } else {
                var latlng = new google.maps.LatLng(37.42224,-122.0883822);
            }

            var myOptions = {
                zoom: 9,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),
                myOptions);

            var input = document.getElementById('maps-input');
            var searchBox = new google.maps.places.SearchBox(input);

            map.addListener('click', function (e) {
                placeMarker(e.latLng, map, test);
            });

            map.addListener('bounds_changed', function () {
                searchBox.setBounds(map.getBounds());

            });

            // TRIGGER RESIZE EVENT TO RENDER MAP
            $timeout(function(){
                google.maps.event.trigger(map, 'resize');
                if (marker && test.marker) {
                    map.setCenter(marker.getPosition());
                }
            },1);

        };
        
        var marker;

        function placeMarker(location, map, test) {
            $scope.$apply(function () {
                test.gps = location.lat() + "," + location.lng();

            });

            if (marker && test.marker) {
                marker.setPosition(location);

            } else {
                marker = new google.maps.Marker({
                    position: location,
                    map: map
                });
            }
            test.marker = true;
        };

Occasionally, the map may take a moment to fully load

Answer №1

Similar questions

Can multiple groupings of objects be viewed in a JSON file?

Boost Page Speed with Angular

Is there a more efficient method for streamlining the Express-Validator middleware in a separate file

Accessing the current clicked item in $scope using an Angular Directive within ng-repeat

`Easily handle a Restangular resource``

tips for selecting various API requests based on the selected drop down menu choice

ReactJS encountered an error: _this3.onDismissID is not defined as a function

In a Vue.js application, parameter passing does not function as intended

Modifying an element's value according to user input: Step-by-step guide

Here is a way to return a 400 response in `express.js` when the JSON request body is invalid

What causes the difference in behavior of nodejs function arguments when explicitly called?

Jquery's intermittent firing of .ajax within if statement

history.push() function is ineffective within a JavaScript file that does not contain a class

Using AngularJS directive within an HTML input tag is simple and straightforward

Enable a click event within an iFrame by clicking on an element in the parent document

Clicking will cause my background content to blur

Is there a way to prevent a page from automatically redirecting to another page without relying on user action or using the StopPropagation and window.onbeforeunload event?

"Encountering difficulty in retrieving information from $q and integrating it into the

Using Google Tag Manager to track the values of a formula field

Discovering the geographical location of all users using Node.js: A step-by-step guide