CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
bdcoder
bdcoder

Reputation: 3781

Google maps API v3 - Calculating map container height and width

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>

Upvotes: 7

Views: 7969

Answers (2)

beaver
beaver

Reputation: 17647

Or simpler:

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

where map is the MapClass instance

Upvotes: 14

Michael Geary
Michael Geary

Reputation: 28850

If you just want the pixel dimensions of the map container, you don't need the Maps API at all. The container element's offsetWidth and offsetHeight properties have the values you're looking for.

In your example, you could use:

var container = document.getElementById('map-canvas');
var width = container.offsetWidth;
var height = container.offsetHeight;

Upvotes: 6

Related Questions