Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Christopher 28 posts 168 karma points
    Jun 23, 2014 @ 16:31
    Christopher
    2

    Fix for the resize bug

    Inside of the GMaps.controller.js file the following code initialises the map:

    assetsService.loadJs('http://www.google.com/jsapi')
        .then(function () {
            google.load("maps", "3", { callback: initializeMap, other_params: "sensor=false&libraries=places" });
        });

    However if you change it to be:

    assetsService.loadJs('http://www.google.com/jsapi')
    .then(function () {
        setTimeout(function() { google.load("maps", "3", { callback: initializeMap, other_params: "sensor=false&libraries=places" }); }, 350); });

    This minor added delay in initialising the map will resolve the grey/non-loading map on repeat loads.

  • Dirk De Grave 4532 posts 5977 karma points MVP 3x admin c-trib
    Jun 23, 2014 @ 16:36
    Dirk De Grave
    0

    Added issue on GitHub. Should have a release out soon-ish

    /Dirk

  • Anders Brohäll 292 posts 558 karma points
    Jul 11, 2014 @ 12:13
    Anders Brohäll
    1

    Not the solution, only if the picker is placed in the first tab of the doctype.

    You want to do something like thisin the ending of initializeMap() in the GMaps.controller:

    var pane = $('#' + $scope.model.alias + '_map').closest('.umb-tab-pane')
    $('[href="#' + pane.attr('id') + '"]').on('click', function () {
        setTimeout(function () {
            google.maps.event.trigger(map, 'resize');
            map.setCenter(mapCenter);
        }, 10)
    })
    
  • Amalie Wowern 104 posts 210 karma points
    Jul 28, 2014 @ 14:46
    Amalie Wowern
    1

    This worked for me, i have the map in the second tab

    var pane = $('#' + $scope.model.alias + '_map').closest('.umb-tab-pane');
                $('[href="#' + pane.attr('id') + '"]').on('click', function() {
                    setTimeout(function() {
                        google.maps.event.trigger(map, 'resize');
                        map.setCenter(mapCenter);
                    }, 10);
                });

  • Amalie Wowern 104 posts 210 karma points
    Jul 28, 2014 @ 14:48
    Amalie Wowern
    0

    This worked for me, i have the map in the second tab

    var pane = $('#' + $scope.model.alias + '_map').closest('.umb-tab-pane');
                $('[href="#' + pane.attr('id') + '"]').on('click', function() {
                    setTimeout(function() {
                        google.maps.event.trigger(map, 'resize');
                        map.setCenter(mapCenter);
                    }, 10);
                });

  • James Jackson-South 488 posts 1737 karma points c-trib
    Nov 03, 2014 @ 17:39
    James Jackson-South
    0

    It looks like, reading this, you are having an issue with only part of the map loading and the map center point being wrong when the map is loaded in a hidden tab. Is that correct?

    If so, the issue is due to the fact that the map script cannot correctly calculate dimensions when within a hidden container.

    The fix is actually pretty simple.

    Before initialising the map check whether the map is visible or not. If not, you would add a class to position the map absolutely to allow calculation of dimensions

    Something like (Just making up variable names and selectors):

    // Google maps has an offset bug when initialized on a container set to display:none.
    // To fix this we load it off-screen then reposition it.
    if ($map.parent().is(":hidden")) {
        $map.parent().addClass("map-off");
    }
    

    With CSS looking like this.

    /* Used for rendering maps off screen*/
    .map-off {
        min-height:700px;
        position: absolute;
        left: -10000px;
    }
    

    Once the map is loaded it will fire an event you can tap into to remove the class.

    // Move the map back into position on the tilesLoaded event.
    google.maps.event.addListener(this.map, "tilesloaded", function () {
        $map.parent().removeClass("map-off");
    });
    

    Hope that helps. :)

  • Amir Khan 971 posts 1927 karma points
    May 05, 2015 @ 20:14
    Amir Khan
    0

    Was this ever resolved? I'm having an issue where the map scales super tiny at first load and is tough to use.

    -Amir

  • Dirk De Grave 4532 posts 5977 karma points MVP 3x admin c-trib
    May 05, 2015 @ 20:47
    Dirk De Grave
    0

    Hi Amir,

    Realizing I'm about the worst pm and code collaborator on the project... I've started all this as some kind of proof of concept and learning path for creating property editors using Angularjs. And to be honest, currently don't find the time to maintain the code base (Yes, I feel really bad about it).

    So, if people are willing to collab, I'd happily add you or other people as contributors on the repo.

    Cheers, -Dirk

  • Barry Fogarty 487 posts 1112 karma points
    Oct 13, 2015 @ 11:32
    Barry Fogarty
    0

    I was going to make a PR for this when I realised the following code in the repo already deals with this issue:

    $('a[data-toggle="tab"]').on('shown', function (e) {
                    var center = map.getCenter();
                    google.maps.event.trigger(map, 'resize');
                    map.setCenter(center);
                });
    

    Problem is this code does not exist in the package. If you could rebuild the package to include the latest updates please, it would save users the bother of doing it manually.

  • Chester Campbell 53 posts 91 karma points
    Oct 23, 2015 @ 19:06
    Chester Campbell
    0

    I just installed this via nuget and I checked and it does include this code. But I am still seeing the issue.

    Specifically, the first time you create a content node and scroll down to the map you'll see the map loaded correctly. But then if you click on a different content node (that contains the map property editor) the map on that node will not load (gray background).

    Then if you click back to the original node it will also not load properly (gray background).

    If you refresh the browser window then the first node you look at will load properly, but not any subsequent nodes. No javascript errors in the console.

Please Sign in or register to post replies

Write your reply to:

Draft