title: Google Maps click on marker pan to bottom of screen
body: <p>I'm working on a google maps project.  We are using custom overlays as the marker pop up.  The pop ups are meant to be kind of large.  So i want to, on click of the marker, have the map pan so the marker is around 50 pixels from the bottom of the viewport to allow for room for the pop up.  </p>
  
  <p>Currently,  I just have it panning to the lat/long of the marker.</p>
  
  <pre><code>google.maps.event.addDomListener(div, "click", function(e) {
              var x = e.x,
                  y = $(div).offset(),
                  windowHeight = $(window).height(),
                  windowWidth = $(window).width();
              if(!$(div).find('.ryan').hasClass("scaleUp")){
                  map.panTo({lat: args.location.lat, lng: args.location.lng})
                  var top = $(div).offset().top, mapHeight = $('#content-wrapper').height();
  
  
  
                  $(div).append(buildBubble(self.getHcpCount())).css("z-index", markerZindex++)
                  var bubble = $(this).find('.ryan');
                  var windowPercentage = .5;
                  bubble.css({
                      "width": windowWidth * windowPercentage,
                      "height": windowHeight * windowPercentage,
                      "top": 0,
                      "left": 0,
                      "margin-top": -1 * windowWidth * windowPercentage / 2,
                      "margin-left": -1 * windowWidth * windowPercentage / 2 + $(this).width() / 2
                  });
  
                  bubble.find('.bubble-body').css({
                      "height": bubble.height() - bubble.find('.bubble-header').height()
                  });
  
                  bubble.find('.bubble-section').css({
                      "width": (bubble.width() /*- arrowLeft - arrowRight*/) / 2 - 5
                  });
  
                  bubble.find('.hcps-wrapper').css({
                      "width": (bubble.width() /*- arrowLeft - arrowRight*/)
                  })
  
                  attachBubbleHandler($(div));
  
                  map.setOptions({disableDoubleClickZoom: true });
              }else{
                  map.setOptions({disableDoubleClickZoom: false });
              }   
              $(div).find('.ryan').toggleClass("scaleUp", function(){
                  if(!$(this).hasClass('scaleUp')){
                      $(this).unbind().remove();
                  }
              });
          });
  
          //this handles the zIndex problem with clusters being over marker bubbles
          this.getPanes().floatPane.appendChild(div);
  
      }
  
      var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
  
      //LOCATION OF THE TOP AND LEFT POINTS OF THE BUBBLE
      if (point) {
          div.style.left = (point.x - 20) + 'px';
          div.style.top = (point.y) + 'px';
      }
  
  };//END DRAW MARKER
  </code></pre>