Javascript – Google maps API v3 – Calculating map container height and width

google-maps-api-3javascript

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 …

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???

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 !

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Get Map Container Size</title>
<style>
#map-canvas { margin:0;padding:0;height:600px;width:800px; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>

<script>

   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 = '<div style="padding:8px;text-align:center;background: rgb(245, 245, 220);background: rgba(245, 245, 220, 0.2);">';

         s += 'Zoom = ' + this.map_.getZoom().toString();
         s += '<br>World Width = ' + ww.toString();
         s += '<br>Map NE = ' + map_ne.toString();
         s += '<br>Map SW = ' + map_sw.toString();
         s += '<br>fromLatLngtoContainerPixel(Map NE) = ' + cont_ne_pt.toString();
         s += '<br>fromLatLngtoContainerPixel(Map SW) = ' + cont_sw_pt.toString();
         s += '<br>fromLatLngtoDivPixel(Map NE) = ' + div_ne_pt.toString();
         s += '<br>fromLatLngtoDivPixel(Map SW) = ' + div_sw_pt.toString();
         s += '<br>Map Height = ' + height.toString() + 'px, ';
         s += '<br>Map Width = ' + width.toString() + 'px';
         s += '</div>';

         div.innerHTML = s;

      }

   };

   test_overlay.prototype.onRemove = function () {

      this.div_.parentNode.removeChild(this.div_);

      this.div_ = null;

   };

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

Best Answer

Or simpler:

var w = map.getDiv().offsetWidth;
var h = map.getDiv().offsetHeight;

where map is the MapClass instance

Related Topic