Setting zIndex of CartoDB.js layer on top of Google Map's GroundOverlay?

Question

I am trying to combine the Google Maps API Ground Overlay example with CartoDB.js example using Google Maps. It appears both APIs are displaying their layers correctly.

However, the ground overlay is always displayed on top. I would like to see the positions from the CartoDB viz layer to appear on top of the ground overlay. Any suggestions?

Answer 1

After trying a couple of different things, and based on information from this SO post and Google Maps Custom Overlays. I ended up with this solution:

      // Constructor
      function CustomOverlay(map) {
        this.setMap(map);
      }

      // Inside main function
      // ...
      /*
         Custom Overlay

         Overlay holds the Pane that holds GroundOverlay, so we can
         accquire the handle to set the appropriate zIndex.

         See: 
         https://developers.google.com/maps/documentation/javascript/customoverlays. 
         https://stackoverflow.com/a/3063476/82180
      */
      var customOverlay;
      CustomOverlay.prototype = new google.maps.OverlayView();
      overlay = new CustomOverlay(map);

      CustomOverlay.prototype.onAdd = function() {
        var panes = this.getPanes();    
        panes.overlayLayer.style['zIndex'] = 10; <!-- Magic # based on experimentation! -->
      }

      CustomOverlay.prototype.draw = function() {
        // NOOP
        // The overlay is just a container, we are not adding any custom
        // graphics/text onto it.
      }