How to make overlaid POIs in google maps accessible-CodePudding

This

Concerning functionality POIs are a combination of Image and HTML-Markup, which are both not directly combined in the HTML source but logically combined by position on the map.

Markers

Markers can have individual functions, individual design and some can be also dragged to other locations if the map supports it. They have a different standard design and can have a different z-index than POIs, furthermore they have an

While Images of POIs are always underneath any overlay, Markers can be shown above overlays, which also has some impact to juggling with z-indexes in comparison.

Conclusion so far

There are many layers with different z-indexes and more could probably easily created. Many challenges concerning google maps relate to the z-index and the sorting in the html source, so binding elements to the right layer is likely the solution for many cases.

The challenge

The primary part of the challenge is to create overlays and enabling the clicks on POIs and their info-windows below these overlays. It might be considerable to display the info-windows above the overlays.

The second part of the challenge is to display markers and their info-windows above the overlays. This seems to be much easier than the first part.

What information / experience exists?

This question was how to disable mouse events below an overlay and currently I've the impression it's answer is way to complicated as it would be possible just to raise the z-index of the overlay to avoid mouse events by binding it to a pane. Nevertheless I'm quite glad about question beside answers as the site shines a light on several details.
Also the short example is quite useful to see things in action and to verify some details.

The challenge in details

The example shows that the overlays never prevent click events on POIs below overlays that are bound directly to the map in contrast to any pane.
Nevertheless the info windows can't be closed and so the info windows are a challenge by themselves.
Placing marker on top of the overlay should be easy by binding them to a pane.
So the overlay shall be bound directly to the map, markers to a pane.
Options concerning info windows for POIs are not clear yet, they shall be shown above the overlay or else at least be closable.

It might be still to verify if the behavior of and related to the overlay is always the same if it's built by svg, by html markup or by path i.e with the polygon option.

Comment concerning examples on jsfiddle.net

Local code and code on jsfiddle.net behave a bit different and are not 100% consistent in behavior. So jsfiddle.net is good to show running examples but the code has to be changed perhaps or just used in another variant. If something is not working on jsfiddle.net, try it on your own server first before commenting.

Step 1

As the linked question was about preventing what I want to achieve, first the individual event handlers in the example / answer have to be deactivated.
Furthermore the definition this._div.style.zIndex = 1000; can be deactivated to get the option to close open info-windows. Strange seems to be that info-windows are not always overlaid, but sometimes on top of the overlay, sometimes below. This should be consistent, at best above the overlay. Another issue is that the info windows are not always closable but in most cases when I tried (On jsfiddle.net this does not work).

The small changes can be seen here in action.

Here is the full code for testing on the own server, add your own API key in the bottom of the file in the variable "googleApiKey":

<!doctype html> <html> <head> <title>Example for clickevents</title> <style> html, body {height: 100%;margin: 0;padding: 0;} #googleMap {height: 70%; width:100%} </style> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script type="application/javascript" src="//code.jquery.com/jquery-2.1.3.js" ></script> </head> <body> <div id="googleMap"></div> <div id="message"></div> <script> let map; function log(msg) { //console.log(msg); document.getElementById('message').innerHTML = msg '<br>'; } function initMap() { var mapProp = { center: new google.maps.LatLng(51.508742, -0.120850), zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); let myMarkers = []; myMarkers['marker1'] = new google.maps.Marker({ position: new google.maps.LatLng(51.506742, -0.120850), map: map, title: "MARKER 1", }); myMarkers['marker2'] = new google.maps.Marker({ position: new google.maps.LatLng(51.510742, -0.120850), map: map, title: "MARKER 2", }); for (currentMarker in myMarkers) { var marker = new google.maps.Marker({ position: myMarkers[currentMarker].position, map: map, title: myMarkers[currentMarker].title, // icon: icon, }); } var infowindow = new google.maps.InfoWindow({ content: 'Welcome to Google! Thanks for using our products and services (“Services”). The Services are provided by Google Inc. (“Google”), located at 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.By using our Services, you are agreeing to these terms. Please read them carefully.Our Services are very diverse, so sometimes additional terms or product requirements (including age requirements) may apply. Additional terms will be available with the relevant Services, and those additional terms become part of your agreement with us if you use those Services.' }); myMarkers['marker1'].addListener('click', function () { infowindow.open(map, myMarkers['marker1']); }); myMarkers['marker2'].addListener('click', function () { log('marker2 clicked'); }); MyOverlay.prototype = new google.maps.OverlayView; //extends google.maps.OverlayView { function MyOverlay(map) { this._div = document.createElement('div'); this._div.style.background = 'rgba(0, 0, 60, 0.2)'; this._div.style.position = 'absolute'; // this._div.style.zIndex = 1000; this._div.style.width = '100%'; this._div.style.height = '200px'; this.listeners = []; this.setMap(map); } const overlay = new MyOverlay(map); // const overlay = new MyOverlay; MyOverlay.events = [ 'mousedown', 'mousemove', 'mouseover', 'mouseout', 'mouseup', 'mousewheel', 'DOMMouseScroll', 'touchstart', 'touchend', 'touchmove', 'dblclick', 'contextmenu' ]; MyOverlay.prototype.onAdd = function () { var self = this; this.getPanes().floatPane.appendChild(this._div); this.listeners = MyOverlay.events.map(function (event) { console.log({map:map,event:event}); myMarkers['marker1'].addListener('mousedown', function () { log('marker1 clicked'); }); }); }; MyOverlay.prototype.onRemove = function () { this.getPanes().floatPane.removeChild(this._div); }; MyOverlay.prototype.draw = function () { myMarkers['marker1'].addListener('mousedown', function () { log('marker1 clicked'); }); }; overlay.setMap(map); console.log(overlay); } window.initMap = initMap; googleApiKey = ''; </script> <script src="https://maps.googleapis.com/maps/api/js?key=" googleApiKey "&callback=initMap&v=weekly&channel=2&region=DE&language=de" async defer ></script> </body> </html>

So actually my own initial question how to make POIs accessible is answered, I will answer on more details I mentioned above in "The challenge" later by extending this answer.