title: Google Maps Custom Control positioning
body: <p>I am trying to figure out how to position my control to the center of the page.  but when I use "BOTTOM_CENTER" it centers the left end of the div to the center of the map.    I'd like to offset this so that the center of the div is in the bottom center of the map.  I've search for hours and haven't found any info on doing this..  </p>
  
  <p>Does anyone have an idea how to do this or can point me at a resource that would explain it a little better?</p>
  
  <p>Thanks!</p>
  
  <p>The below is a modified version of <a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/latlng-to-coord-control/latlng-to-coord-control.html" rel="nofollow">Converting LatLng/Pixel Coordinate Control</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;LatLng Coordinates Control&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
        #map {
          width: 800px;
          height: 600px;
        }
  
        #latlng-control {
          background: #ffc;
          border: 1px solid #676767;
          font-family: arial, helvetica, sans-serif;
          font-size: 0.7em;
          padding: 2px 4px;
          position: absolute;
        }
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
  function degToDms(dec) {
  
      var deg = Math.floor(Math.abs(dec));
      var min = Math.floor((Math.abs(dec)-deg)*60);
      var sec = (Math.round((((Math.abs(dec) - deg) - (min/60)) * 60 * 60) * 100) / 100 ) ;
  
      var len = String(deg).length
      deg = Array(3 + 1 - len).join('0') + deg;
      var len = String(min).length
      min = Array(2 + 1 - len).join('0') + min;
      var len = String(sec).length
      sec = Array(5 + 1 - len).join('0') + sec;
  
      deg = dec &lt; 0 ? '-' + deg : deg;
  
          var dec_min = (min*1.0 + (sec/60.0));
  
      var dms  = deg + '&amp;deg ' + dec_min.toFixed(3) + '\'';
      return dms;
  }
  
         function LatLngControl(map) {
  
          this.node_ = this.createHtmlNode_();
          map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(this.node_);
          this.setMap(map);
          this.set('visible', false);
        }
  
        LatLngControl.prototype = new google.maps.OverlayView();
        LatLngControl.prototype.draw = function() {};
  
        LatLngControl.prototype.createHtmlNode_ = function() {
          var divNode = document.createElement('div');
          divNode.id = 'latlng-control';
          divNode.index = 100;
          return divNode;
        };
  
        LatLngControl.prototype.visible_changed = function() {
          this.node_.style.display = this.get('visible') ? '' : 'none';
          //this.node_.style.floatRight  = '100px';
          };
  
        LatLngControl.prototype.updatePosition = function(latLng) {
          var dmsLat = degToDms(latLng.lat().toFixed(4));
          var dmsLon = degToDms(latLng.lng().toFixed(4));
          this.node_.innerHTML = 'Mouse Position: ' +  dmsLat + ', ' + dmsLon;    
        };
  
        function init() {
          var centerLatLng = new google.maps.LatLng(37.748582,-122.418411);
          var map = new google.maps.Map(document.getElementById('map'), {
            'zoom': 10,
            'center': centerLatLng,
            'mapTypeId': google.maps.MapTypeId.ROADMAP
          });
  
          var latLngControl = new LatLngControl(map);
  
          google.maps.event.addListener(map, 'mouseover', function(mEvent) {
            latLngControl.set('visible', true);
          });
          google.maps.event.addListener(map, 'mouseout', function(mEvent) {
            latLngControl.set('visible', false);
          });
          google.maps.event.addListener(map, 'mousemove', function(mEvent) {
            latLngControl.updatePosition(mEvent.latLng);
          });
        }
  
        google.maps.event.addDomListener(window, 'load', init);
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;LatLng Coordinate Control&lt;/h2&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>