title: Google Maps API 3 fitBounds padding - ensure markers are not obscured by overlaid controls
body: <p>I'd like to be able add padding to a map view after calling a <a href="https://developers.google.com/maps/documentation/javascript/reference" rel="noreferrer"><code>map.fitBounds()</code></a>, so all markers can be visible regardless of map controls or things like sliding panels that would cover markers when opened. Leaftlet has an <a href="http://leafletjs.com/reference.html#map-fitboundsoptions" rel="noreferrer">option to add padding to fitBounds</a>, but Google Maps does not.</p>
  
  <p>Sometimes the northmost markers partially hide above the viewport. The westmost markers also often lay under the zoom slider. With API 2 it was possible to form a virtual viewport by reducing given paddings from the map viewport and then call the method <code>showBounds()</code> to calculate and perform zooming and centering based on that virtual viewport:</p>
  
  <pre><code>map.showBounds(bounds, {top:30,right:10,left:50});
  </code></pre>
  
  <p>A working example of this for API 2 can be found <a href="http://koti.mbnet.fi/ojalesa/exam/index.html" rel="noreferrer">here</a> under the showBounds() example link.</p>
  
  <p>I cannot find similar functionality in API V3, but hopefully there is another way this can be accomplished. Maybe I could grab the northeast and southwest points, then add fake coordinates to extend the bounds further after including them?</p>
  
  <h3>UPDATE</h3>
  
  <p>(<a href="http://codepen.io/dandv/pen/QGWPzP" rel="noreferrer">Codepen</a> in case the code below doesn't work)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      draggable: true,
      streetViewControl: false,
      zoomControl: false
    });
  
    var marker1 = new google.maps.Marker({
      position: {lat: 37, lng: -121},
      map: map,
    });
  
    var marker2 = new google.maps.Marker({
      position: {lat: 39.3, lng: -122},
      map: map,
    });
   
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(marker1.position);
    bounds.extend(marker2.position);
    map.fitBounds(bounds);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map {
    height: 640px;
    width: 360px;
  }
  #overlays {
    position: absolute;
    height: 50px;
    width: 340px;
    background: white;
    margin: -80px 10px;
    text-align: center;
    line-height: 50px;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Simple markers&lt;/title&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
      &lt;div id="overlays"&gt;Controls / Order pizza / ETA / etc.&lt;/div&gt;
    
      &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?&amp;callback=initMap"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is this:</p>
  
  <p><a href="https://i.stack.imgur.com/gKQSU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/gKQSU.png" alt="enter image description here"></a></p>
  
  <p>I've tried adding a control as documented at <a href="https://developers.google.com/maps/documentation/javascript/controls#CustomControls" rel="noreferrer">Custom controls</a>, but the map isn't exactly aware of it - see <a href="https://jsfiddle.net/dandv/pn66Lfcz/" rel="noreferrer">this fiddle</a> forked from the <a href="https://developers.google.com/maps/documentation/javascript/examples/control-custom" rel="noreferrer">Maps custom control example</a>. One of the markers is still obscured by the control.</p>