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");
});
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.
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.
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.
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.
Added issue on GitHub. Should have a release out soon-ish
/Dirk
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:
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);
});
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);
});
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):
With CSS looking like this.
Once the map is loaded it will fire an event you can tap into to remove the class.
Hope that helps. :)
Was this ever resolved? I'm having an issue where the map scales super tiny at first load and is tough to use.
-Amir
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
I was going to make a PR for this when I realised the following code in the repo already deals with this issue:
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.
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.
is working on a reply...