title: OverlayView auto position Google Map V3
body: <p>I have created a div with 100% height and width what i want is to to open an overlay on a pushpin click but i wanted to position overlay according to screen bounds, so it does not pan the area to fit the the view.</p>
  
  <p>This is the code i am using, but it is not working if i pan the pushpin to the corners of the map and then click to open overlay.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  </code></pre>
  
  <p>
      
      
      </p>
  
  <pre><code>        //text overlays
          function PropertyDetailOverlay(pos, txt, cls, map){
  
              // Now initialize all properties.
              this.pos = pos;
              this.txt_ = txt;
              this.cls_ = cls;
              this.map_ = map;
  
  
              // We define a property to hold the image's
              // div. We'll actually create this div
              // upon receipt of the add() method so we'll
              // leave it null for now.
              this.div_ = null;
  
              // Explicitly call setMap() on this overlay
              this.setMap(map);
          }
  
          PropertyDetailOverlay.prototype = new google.maps.OverlayView();
  
  
          PropertyDetailOverlay.prototype.draw = function () {
  
  
              var overlayProjection = this.getProjection();
  
              // Retrieve the southwest and northeast coordinates of this overlay
              // in latlngs and convert them to pixels coordinates.
              // We'll use these coordinates to resize the DIV.
              var position = overlayProjection.fromLatLngToDivPixel(this.pos);
  
              var div = this.div_;
  
  
              // Now position our DIV based on the DIV coordinates of our bounds
  
  
              var mapWidth = map.getDiv().offsetWidth;
              var mapHeight = map.getDiv().offsetHeight;
  
              var boxWidth = 200;
              var boxHeight = 40;
  
              var left = 0;
              var top = 0;
              var xStart = position.x - boxWidth / 2;
              var xEnd = position.x + boxWidth / 2;
              var yStart = position.y;
              var yEnd = position.y + boxHeight;
  
              if (xStart &lt; 0)
                  left = 0;
              else if (xEnd &gt; mapWidth)
                  left = mapWidth - boxWidth;
              else
                  left = xStart;
  
  
              if (yEnd &gt; mapHeight)
                  top = mapHeight - 2 * boxHeight;
              else
                  top = position.y;
  
              div.style.left = left + 'px';
              div.style.top = top + 'px';
  
  
  
          }
  
  
          PropertyDetailOverlay.prototype.onAdd = function () {
  
              google.maps.event.addListener(map, 'bounds_changed', function () {
  
                  txt.bounds_ = map.getBounds();
                  txt.draw();
  
              });
  
              // Note: an overlay's receipt of onAdd() indicates that
              // the map's panes are now available for attaching
              // the overlay to the map via the DOM.
  
              // Create the DIV and set some basic attributes.
              var div = document.createElement('DIV');
              div.className = this.cls_;
  
              div.innerHTML = this.txt_;
  
              // Set the overlay's div_ property to this DIV
              this.div_ = div;
              var overlayProjection = this.getProjection();
              var position = overlayProjection.fromLatLngToDivPixel(this.pos);
              div.style.left = position.x + 'px';
              div.style.top = position.y + 'px';
              // We add an overlay to a map via one of the map's panes.
  
              var panes = this.getPanes();
              panes.floatPane.appendChild(div);
              this.toggle();
          }
  
         //Optional: helper methods for removing and toggling the text overlay.  
          PropertyDetailOverlay.prototype.onRemove = function(){
              this.div_.parentNode.removeChild(this.div_);
              this.div_ = null;
          }
          PropertyDetailOverlay.prototype.hide = function(){
              if (this.div_) {
                  this.div_.style.visibility = "hidden";
              }
          }
  
          PropertyDetailOverlay.prototype.show = function(){
              if (this.div_) {
                  this.div_.style.visibility = "visible";
              }
          }
  
          PropertyDetailOverlay.prototype.toggle = function(){
              if (this.div_) {
                  if (this.div_.style.visibility == "hidden") {
                      this.show();
                  }
                  else {
                      this.hide();
                  }
              }
          }
  
          PropertyDetailOverlay.prototype.toggleDOM = function(){
              if (this.getMap()) {
                  this.setMap(null);
              }
              else {
                  this.setMap(this.map_);
              }
          }
  
  
  
  
          var map;
          var _prevOverlay;
  
          function init(){
              var latlng = new google.maps.LatLng(37.9069, -122.0792);
              var myOptions = {
                  zoom: 4,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById("map"), myOptions);
  
              var marker = new google.maps.Marker({
                  position: latlng,
                  map: map,
                  title: "Hello World!"
              });
  
  
              AddMarker(latlng, marker);
  
  
  
  
  
  
          }
          var added = false;
  
          function AddMarker(latlng,marker) {
              customTxt = "&lt;div style='width:200px;height:40' &gt;60th Ave, Mercer Island&lt;/div&gt;";
              txt = new PropertyDetailOverlay(latlng, customTxt, "customBox", map);
  
  
  
              google.maps.event.addListener(marker, 'click', function () {
                  if (_prevOverlay != null &amp;&amp; _prevOverlay != txt)
                      _prevOverlay.toggle();
                  txt.toggle();
                  _prevOverlay = txt;
  
              });
  
              google.maps.event.addListener(map, 'click', function (event) {
                  if (_prevOverlay != null)
                      _prevOverlay.hide();
              });
  
              google.maps.event.addListener(map, 'bounds_changed', function (event) {
                  if (_prevOverlay != null)
                      _prevOverlay.hide();
              });
  
  
  
          }
      &lt;/script&gt;
      &lt;style&gt;
          .customBox 
          {
              padding:5px;
              background: #0866C3;
              border: 1px solid white;
              -moz-border-radius: 5px;
              border-radius: 5px;
              position: absolute;
  
          }
  
  
      &lt;/style&gt;
  
       &lt;style type="text/css"&gt;
      html
      {
          height: 100%;
      }
      body
      {
          height: 100%;
          margin: 0px;
          padding: 0px;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body onload="init()"&gt;
      &lt;div id="map" style="height:100%;width:100%"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Regards</p>