title: Google maps API v3 - Calculating map container height and width
body: <p>I cut and paste some sample code from the Google maps API documentation that uses an OverlayView so one can access the built-in MapCanvasProjection methods ( fromLatLngToContainerPixel() and fromLatLngToDivPixel() ) in order to convert from Lat/Lon to container pixel and back again ... great ...</p>
  
  <p>The code is shown below and is simple enough, and works at all zoom levels UNTIL the map projection begins to wrap (at zoom levels below 2).  I understand that the projection is wrapping, but is there a mathematical method for calculating the map container size WITHOUT THE USE OF JQUERY OR OTHER EXTERNAL LIBRARIES???</p>
  
  <p>Ideally, I just wanted to use the objects and methods supplied by the Google maps API to convert from Lat/Lon to pixel coordinates (within the map container) -- but how to deal with the projection wrapping? if someone can advise, that would be great !</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &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;Get Map Container Size&lt;/title&gt;
  &lt;style&gt;
  #map-canvas { margin:0;padding:0;height:600px;width:800px; }
  &lt;/style&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
     var overlay;
  
     test_overlay.prototype = new google.maps.OverlayView();
  
     function initialize() {
  
        var mapOptions = { zoom: 11, center: new google.maps.LatLng(62.323907, -150.109291) };
  
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
        overlay = new test_overlay( map );
  
     }
  
     function test_overlay(map) {
  
        this.map_ = map;
  
        this.div_ = null;
  
        this.setMap(map);
  
     }
  
     test_overlay.prototype.onAdd = function () {
  
        var div = document.createElement('div');
  
        div.style.cssText = "border:1px solid red;background: rgba(245, 245, 220, 0.2);"
  
        this.div_ = div;
  
        var panes = this.getPanes();
  
        panes.overlayLayer.appendChild(div);
  
     };
  
  
     test_overlay.prototype.draw = function () {
  
        // Get projection to get info on map container div ...
  
        var proj = this.getProjection();
  
        if (proj) {
  
           var ww = proj.getWorldWidth();
  
           var b = this.map_.getBounds();
  
           var map_ne = b.getNorthEast();
           var map_sw = b.getSouthWest();
  
           var cont_ne_pt = proj.fromLatLngToContainerPixel(map_ne);
           var cont_sw_pt = proj.fromLatLngToContainerPixel(map_sw);
  
           var div_ne_pt = proj.fromLatLngToDivPixel(map_ne);
           var div_sw_pt = proj.fromLatLngToDivPixel(map_sw);
  
           var div = this.div_;
  
           var width = div_ne_pt.x - div_sw_pt.x;
  
           var height = div_sw_pt.y - div_ne_pt.y;
  
           var s = '&lt;div style="padding:8px;text-align:center;background: rgb(245, 245, 220);background: rgba(245, 245, 220, 0.2);"&gt;';
  
           s += 'Zoom = ' + this.map_.getZoom().toString();
           s += '&lt;br&gt;World Width = ' + ww.toString();
           s += '&lt;br&gt;Map NE = ' + map_ne.toString();
           s += '&lt;br&gt;Map SW = ' + map_sw.toString();
           s += '&lt;br&gt;fromLatLngtoContainerPixel(Map NE) = ' + cont_ne_pt.toString();
           s += '&lt;br&gt;fromLatLngtoContainerPixel(Map SW) = ' + cont_sw_pt.toString();
           s += '&lt;br&gt;fromLatLngtoDivPixel(Map NE) = ' + div_ne_pt.toString();
           s += '&lt;br&gt;fromLatLngtoDivPixel(Map SW) = ' + div_sw_pt.toString();
           s += '&lt;br&gt;Map Height = ' + height.toString() + 'px, ';
           s += '&lt;br&gt;Map Width = ' + width.toString() + 'px';
           s += '&lt;/div&gt;';
  
           div.innerHTML = s;
  
        }
  
     };
  
     test_overlay.prototype.onRemove = function () {
  
        this.div_.parentNode.removeChild(this.div_);
  
        this.div_ = null;
  
     };
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="map-canvas"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>