title: google maps adding overlay layer above UI and markers
body: <p>I have a website with a google map filled with multiple markers. Each marker stands for an event on a festival. Since the information is too big to fit in the infowindow, i have decided to use a custom overlay. So far, with partially success. Here below is my image. As you can see, the overlay is below the marker. <strong>My goal is that the overlay comes above the markers and UI.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/FFTjD.jpg" alt="enter image description here"></p>
  
  <p>Here below is my code sample,</p>
  
  <pre><code>TxtOverlay.prototype.draw = function() {
      // create info window
      var div = document.createElement("div");
      div.id = "mapOverlay";
      div.innerHTML = this.txt;
      div.style.cssText = 'background-color : #000; color: #FFF; border-radius: 15px; border-style : solid; border-width : 1px;padding: 10px; z-index: 9999; display: block; width: 460px; height: 460px; opacity: 0.4;';
  
      // get projection
      var map = this.map;
      var overlayProjection = this.getProjection(); 
      var anchor = overlayProjection.fromLatLngToDivPixel(this.pos);
      div.style.position = "absolute";
      div.style.left = (anchor.x - 240) + 'px';
      div.style.top = (anchor.y - 240)+ 'px';
  
      // bind created div to object var
      this.div = div;
      // add to map
      var panes = this.getPanes();
      panes.overlayLayer.appendChild(div);
  
      console.log("prototype draw");
  }
  </code></pre>
  
  <p>I have used z-index to 9999 ( there are 4000 markers atm ) but it doesn't work. Maybe it's worth to note that each marker id has its own z-index. (fe marker id = 1 has z-index = 1, marker id = 2 has z-index = 2, marker id = 3 has z-index = 3, ect )</p>
  
  <p>If the overlay is on the top of both markers and UI, then it's easier to catch the click event to remove the overlay instead of manipulating the map and the map-objects.</p>
  
  <p>thank you.</p>