Google Maps API v3 - Calculate the height and width of the map container
I cut and pasted some example code from the Google Maps API documentation that uses OverlayView, so you can access the built-in MapCanvasProjection methods (fromLatLngToContainerPixel () and fromLatLngToDivPixel ()) to convert from Lat / Lon to container pixel and back ... fine...
The code shown below is simple enough and works at all zoom levels until the map projection starts to wrap around (at zoom levels below 2). I understand that projection is a wrap, but is there a mathematical method for calculating the size of the map container WITHOUT USING JQUERY OR OTHER EXTERNAL LIBRARIES?
Ideally, I just wanted to use the objects and methods provided by the Google Maps API to convert from Lat / Lon coordinates to pixel (inside the map container), but how do I deal with the flow around the projection? if anyone 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>
source to share
If you want pixel dimensions for a map container, you don't need the Maps API at all. In elements of the container offsetWidth
and offsetHeight
has a value that you are looking for.
In your example, you can use:
var container = document.getElementById('map-canvas');
var width = container.offsetWidth;
var height = container.offsetHeight;
source to share
Or more simply:
var w = map.getDiv().offsetWidth;
var h = map.getDiv().offsetHeight;
where map
is an instance of MapClass
source to share