title: How to make multiple Overlays on a single Google Map?
body: <p>I'm using an overlay on Google Maps to plot an alternate image on the map, and it's working fine. I'm using <code>OverlayView()</code>, and I'm able to create some designs on the Overlay too via the drawing API, which is great.</p>
  
  <p>The issue is I want to add an additional overlay in between the two to create some opacity (a slight screening effect) on the underlying map. </p>
  
  <p>Do I use two different overlay methods on the same map? </p>
  
  <p>Here's where it's at.</p>
  
  <p>I have <code>this.maps</code> set to be the GMaps library, and <code>this.map</code> set to be the map instance itself.</p>
  
  <pre class="lang-js prettyprint-override"><code>  createOverlay() {
  
      MyOverlay.prototype = new this.maps.OverlayView()
  
      /* Constructor for the OverlayView() class */
      function MyOverlay(bounds, image, map) {
        /* Set up local properties */
        this.bounds_ = bounds
        this.image_ = image
        this.map_ = map
  
        /* Set up property to hold the overlay, which is added in onAdd() */
        this.div_ = null
  
        /* Explicitly attach this overlay. */
        this.setMap(map)
      }
  
      /**
       * onAdd() - called when the map's panes are ready and the overlay is added
       */
      MyOverlay.prototype.onAdd = function () {
        /* Create the element to hold the overlay */
        const evDiv = document.createElement('div')
        evDiv.style.borderStyle = 'none'
        evDiv.style.borderWidth = '0px'
        evDiv.style.position = 'absolute'
  
        /* Create the image element for the overlay and attach it */
        const evImg = document.createElement('img')
        evImg.src = this.image_
        evImg.style.width = '100%'
        evImg.style.height = '100%'
        evImg.style.position = 'absolute'
        evDiv.appendChild(evImg)
  
        this.div_ = evDiv
  
        /* Attach the elements to the map */
        const panes = this.getPanes()
        panes.overlayLayer.appendChild(evDiv)
  
      }
  
      /**
       * draw() - called whenever the map's tiles are touched to adjust the overlay
       *        - uses sw and ne coords of the overlay to set its size and peg it to
       *          the correct position and size.
       */
      MyOverlay.prototype.draw = function () {
        /* Retrieve the projection from the overlay */
        const overlayProjection = this.getProjection()
  
        /* Convert the coords to pixels and resize the div */
        const sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest())
        const ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast())
        const div = this.div_
        div.style.left = sw.x + 'px'
        div.style.top = ne.y + 'px'
        div.style.width = (ne.x - sw.x) + 'px'
        div.style.height = (sw.y - ne.y) + 'px'
      }
  
      /* onRemove() - Called if we remove the overlay via setting it to 'null' - Not needed yet */
      MyOverlay.prototype.onRemove = function () {
        this.div_.parentNode.removeChild(this.div_)
        this.div_ = null
      }
  
      const { src, latMax, lngMax, latMin, lngMin } = this.state.Imagery
  
      const boundaries = new this.maps.LatLngBounds(
        new this.maps.LatLng(latMin, lngMin),
        new this.maps.LatLng(latMax, lngMax),
      )
  
      this.mapOverlay = new MyOverlay(boundaries, src, this.map)
  
    }
  </code></pre>
  
  <p>The overlay is working fine and loading. I need to add another overlay in between this overlay and the underlying map.</p>