We Keep Coding

Google Maps Marker blocks page scrolling

I'm using google maps markers to show some locations with custom icons. Sometimes there are a lot and on mobile the markers take up a good portion of the screen.
I set google maps to gestureHandling: 'cooperative', so the page can be scrolled while the map is on screen. When the user starts scrolling on a marker, the "Use two fingers to move the map" info appears but the page does not scroll. Start dragging anywhere on the map, the page scrolls just like intended.
This behaviour can also be observed on the Marker API Docs (https://developers.google.com/maps/documentation/javascript/examples/marker-simple) in mobile mode (touch).
Is there a way to unlock page scrolling when the user starts on a marker?

I found that adding a touchstart listener to all marker <img tags which stops propagation will block google's event and thus allow page scrolling.
I've had luck with the following code, but it is worth noting that:
tilesloaded is not strictly when markers are loaded so its a bit of a race condition. If you can find a better event then let me know.
The selector is a bit messy, it captures all of my marker images but I'd be happier if it was more intentionally specific.
google.maps.event.addListenerOnce(map, "tilesloaded", () => document.querySelectorAll(`.gm-style div[role='button'] img[draggable='false']`).forEach(x => x.addEventListener("touchstart", (e) => { e.stopImmediatePropagation() })));
I've also upvoted the issue but I'm not holding my breath.

google maps javascript API - gray map when hiding and showing div

I was having an issue with google maps javascript API returning an empty gray box except for the google logo. I probably would have gotten the UI too, though, if I didn't disable that. I couldn't for the life of me figure out what the issue was, because my test example was working fine, but then I realized it was because I was hiding and showing the div with jquery in my actual project. My fix was to keep it active behind other divs and simply hide those when I'm ready to see the map, but I was wondering if there is a better solution. I'm still not sure why exactly hiding the div and showing it later would cause it to be blank, while leaving it active the whole time works.

try to
setTimeout(function() { map.invalidateSize() }, 900);

try to redraw map after show/hide again using javascript setTimeout function

Call Mapbox GL Function from jQuery

I have a Mapbox map on a page, which loads into a sliding panel which is controlled by jQuery.
If I change the browser window size and toggle the panel, the map often appears only partially filling its container. This is a known issue with the Mapbox GL API.
From their documentation:
If you’re hiding your map initially with something like display:none
and showing it dynamically with JavaScript, it may have some problems
appearing and sizing correctly. The map can’t figure out its own size
when it’s hidden from the page, since it doesn’t have a size in the
browser’s calculation.
With Mapbox GL JS you can call map.resize() to detect and resize the
map
So, I need to call Mapbox's map.resize() function from within my jQuery code, when the sliding panel is opened. Trouble is, I can't seem to get it to work. I've tried the following:
1: $(map).trigger('resize');
2: $(window.map).resize();
3: $(window.map).trigger('resize');
as well as
4: $(window).trigger('resize');
Thing is, I'm not sure about my syntax here and the correct way to call a function residing in another script from within jQuery. I've confirmed that the 'map' object is global, as typing map.resize() directly into my browser's dev tools console works [ie. fixes the map display]. I just can't seem to get jQuery to pass the function.
Also strange is that $(window).trigger('resize') didn't work, as manually resizing the browser window automatically triggers the 'map.resize()' function too [and fixes the map rendering].
EDIT:
Should have mentioned. I've made the map object available globally with: window.map = map; inside the mapbox.js script and made sure that the mapbox.js script loads before the jQuery one, but still no joy.

I managed to solve this in the end. The problem was that the code I was using to trigger the map redraw was as follows:
//inside jQuery map click function
$("#map").slideToggle(200);
$(window.map).resize();
Being a bit of a jQuery newbie, I [idiotically] assumed that those commands would fire sequentially but, of course, the slideToggle() animation is asynchronous. Therefore jQuery was calling the Mapbox resize() function before the sliding panel had reached its final dimensions. Thus causing the map to default to its fallback size of 400x300px
All I needed to do was stick the call to Mapbox resize() into an anonymous function, triggered after the slidetoggle() has completed:
$("#map").slideToggle(200, function()
{
$(window.map).resize();
});
There is still a slight visual glitch in that the map will initially appear at 400x300px, before quickly snapping to fill its container. But since this was a bit of an edge case, dependent on the user having resized their browser window in between toggling the map open and closed, it's good enough for me to deem it solved.

Leaftlet on Ionic Tabs App shows only first tile

I have an Ionic Tabs App (I used the Cordova templates on Visual Studio 2015) with a Leaflet map on the second tab. On the first tab I have some search parameters for POIs that I want to show on the map with markers. Everything is working fine, including the map is showing all the tiles, until I start interacting with the controls on the first tab. Specifically, when I enter an input control and the soft keyboard appears, if I then go to the second tab, the map is only showing the first tile. If I zoom in or out, the map refreshes but shows only the first tile. The problem is solved though if I change orientation of the device.
The soft keyboard is not the only thing that causes the problem. On Ripple for example, the soft keyboard does not show (I use the laptop keyboard) but after a while manipulating the search parameters on the first tab, the map stops working properly.
Also, I have tried with the Mapbox API instead of Leaflet and the problem occurs exactly the same way.

The L.Map instance is unable to correctly get/calculate it's dimensions because at initialization the instance's parent container has a style of display: none. You can call invalidateSize on your map instance to make it recalculate it's dimensions when the tab containing your map is shown:
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically, also animating pan by default.
http://leafletjs.com/reference.html#map-invalidatesize
I'm by far no ionic expert but according to the docs/reference, ion-tab has a on-select callback where you could do this:
Called when this tab is selected.
http://ionicframework.com/docs/api/directive/ionTab/
<ion-tab on-select="onTabSelected()"></ion-tab>
function onTabSelected () {
//Assuming 'map' holds a reference to your map instance.
map.invalidateSize();
}
As mentioned in the comments below by the question poster, the above works, but so does listening for the $ionicView.enter event and using invalidateSize in it's callback:
$scope.$on('$ionicView.enter', function () {
map.invalidateSize();
});

Google Map API doesn't recenter after resize

So, I have a map embedded in a hidden div, that when the link is clicked, the division drops down and reveals itself, however, it won't stay centered on the LatLng I've set. I've read a few articles regarding this and they say you have to initialize the map after displaying the div, but I'm having trouble applying this to my code. Here's what my current header code looks like. The class I apply to the link is 'action' and the class of the dropdown division that it's contained in is called 'content'.
http://pastebin.com/wQc6RrSJ
Sorry if I missed anything.
Thanks in advance for the help, Bc.

You could try 2 things:
Fire the resize event of the map:
google.maps.event.trigger(map, 'resize')
If that doesn't work, just call the setCenter method again after resizing the div.