Hey there, I'm looking for suggestions on a better title for this issue. I couldn't come up with the right wording myself.
Problem
I currently have a Google Maps element with pointer events set to none, preventing it from being scrolled when hovered over - and it's working perfectly fine.
However, I also have a wrapper div around this element. When clicking inside this wrapper, all pointer events on the map within are enabled, allowing scrolling on the map. Once the mouse leaves the map area, pointer events are reverted back to none for scrolling purposes.
The main problem arises when users need to click the map twice in order to scroll after initially clicking it.
I am wondering if there is a way to make it so that by clicking on the overlay once, it toggles the click state to off and then back on again, thus removing confusion for users who may think they need to click twice. The challenge here lies in ensuring that the toggle happens seamlessly while the user is still holding down the click.
Code Snippet
The issue manifests in having a Google Maps section enclosed within a div tag like shown below in the HTML:
<div id="gmap-holder" class="dealer-details__map gmap-scroll-block--on">
<div id="map" class="dealer-details-gmap"></div>
</div>
The JavaScript code functions as described in the header:
$('.dealer-details__map').on('click', function(){
$(this).removeClass('gmap-scroll-block--on');
$(this).addClass('gmap-scroll-block--off');
});
$('.dealer-details__map').on('mouseleave', function(){
$(this).addClass('gmap-scroll-block--on');
$(this).removeClass('gmap-scroll-block--off');
});
Pseudocode for Desired Outcome
$('.dealer-details__map').on('click', function(){
$(this).removeClass('gmap-scroll-block--on');
$(this).addClass('gmap-scroll-block--off');
//pseudo start
//$(this).unclick()
//$(this).child().click();
//pseudo end
});