Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
​
<head>
    <title>Bounds: Smart</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>      
    <script>
        function RectangleOverlay(opt_options) {
            this.setValues(opt_options);
​
            this.createDivs_();
        }
        RectangleOverlay.prototype = new google.maps.OverlayView();
​
        function px(value) {
            return Math.round(value) + 'px';
        }
​
        RectangleOverlay.prototype.positionBoundingBox1_ =
            function (top, left, width, height) {
                this.div1_.style.left = px(left);
                this.div1_.style.top = px(top);
                this.div2_.style.height = px(height);
                this.div2_.style.width = px(width);
                // Hide div3 if we're displaying the first bounding box.  When we position
                // the second bounding box, this will be displayed again.
                this.div3_.style.display = 'none';
        };
​
        RectangleOverlay.prototype.positionBoundingBox2_ =
            function (top, left, width, height) {
                this.div3_.style.left = px(left);
                this.div3_.style.top = px(top);
                this.div4_.style.height = px(height);
                this.div4_.style.width = px(width);
                this.div3_.style.display = '';
        };
​
        RectangleOverlay.prototype.createDivs_ = function () {
            var div1 = this.div1_ = document.createElement('div');
            div1.style.position = 'absolute';
            div1.style.border = '1px solid rgb(68, 68, 187)';
            var div2 = this.div2_ = document.createElement('div');
            div2.style.backgroundColor = '#6666CC';
            div2.style.opacity = '0.2';
            div1.appendChild(div2);
​
            // Used when the bounds is Latitude inverted.
            var div3 = this.div3_ = document.createElement('div');
            div3.style.position = 'absolute';
            div3.style.border = '1px solid rgb(68, 68, 187)';
            var div4 = this.div4_ = document.createElement('div');
            div4.style.backgroundColor = '#6666CC';
            div4.style.opacity = '0.2';
            div3.appendChild(div4);
            div3.style.display = 'none';
        }
​
         // Implement onAdd
        RectangleOverlay.prototype.onAdd = function () {
            // Then add the overlay to the DOM
            var pane = this.getPanes().overlayLayer;
            pane.appendChild(this.div1_);
            pane.appendChild(this.div3_);
​
            // Ensures the label is redrawn if the text or position is changed.
            var me = this;
            this.listeners_ = [
                google.maps.event.addListener(this, 'bounds_changed',
                    function () {
                        me.draw();
                    })
            ];
        }
​
         // Implement onRemove
        RectangleOverlay.prototype.onRemove = function () {
            this.div1_.parentNode.removeChild(this.div1_);
            this.div3_.parentNode.removeChild(this.div3_);
​
            // RectangleOverlay is removed from the map, stop updating its position.
            for (var i = 0, I = this.listeners_.length; i < I; ++i) {
                maps.google.event.removeListener(this.listeners_[i]);
            }
        };
​
         // Implement draw
        RectangleOverlay.prototype.draw = function () {
            var bounds = this.get('bounds');
            if (!bounds) {
                this.div1_.style.display = 'none';
                this.div3_.style.display = 'none';
                return;
            }
​
            var projection = this.getProjection();
            var swPoint = projection.fromLatLngToDivPixel(bounds.getSouthWest());
            var nePoint = projection.fromLatLngToDivPixel(bounds.getNorthEast());
            var worldHeight =
                projection.fromLatLngToDivPixel(new google.maps.LatLng(-85, 0)).y -
                projection.fromLatLngToDivPixel(new google.maps.LatLng(85, 0)).y;
            var width = nePoint.x - swPoint.x;
            var height = swPoint.y - nePoint.y;
            if (nePoint.y <= swPoint.y) {
                this.positionBoundingBox1_(nePoint.y, swPoint.x, width, height);
            } else {
                height = worldHeight - height;
                this.positionBoundingBox1_(nePoint.y, swPoint.x, width, height);
                this.positionBoundingBox2_(swPoint.y - height, swPoint.x, width, height);
            }
        };
        var map, rect;
​
        function initialize() {
            map = new google.maps.Map(document.getElementById("map"), {
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
            });
            rect = new RectangleOverlay({
                map: map
            });
            setBounds(1);
        }
​
        function setBounds(index) {
            var rectBounds;
            if (index == 1) {
                rectBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(-34, 149),
                    new google.maps.LatLng(-33, 152));
            } else if (index == 2) {
                rectBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(-33, 149),
                    new google.maps.LatLng(-34, 152));
            } else if (index == 3) {
                rectBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(15, -157),
                    new google.maps.LatLng(60, -54));
            } else if (index == 4) {
                rectBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(60, -54),
                    new google.maps.LatLng(15, -157));
            } else if (index == 5) {
                // Cross the international dateline.
                rectBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(-40, 145),
                    new google.maps.LatLng(40, -120));
            }
            map.fitBounds(rectBounds);
            map.setZoom(map.getZoom() + 1);
            //check how the bounds fit tot he map; 
            var projection = rect.getProjection();
            if (projection) {
                var swPoint = projection.fromLatLngToDivPixel(rectBounds.getSouthWest());
                var nePoint = projection.fromLatLngToDivPixel(rectBounds.getNorthEast());
                var size_x = Math.abs(nePoint.x - swPoint.x);
                var size_y = Math.abs(nePoint.y - swPoint.y);
                if (size_x > 900 || size_y > 580) { // we loose less than 100px in each dimention)
                    map.setZoom(map.getZoom() - 1);
                }
            }
            rect.set('bounds', rectBounds);
        }
    </script>
</head>
​
<body onload="initialize()">
    <div id="map" style="width: 800px; height: 480px;">map div</div>
    <div>
        <input type="button" value="Bounds 1" onclick="setBounds(1)">
        <input type="button" value="Bounds 2" onclick="setBounds(2)">
        <input type="button" value="Bounds 3" onclick="setBounds(3)">
        <input type="button" value="Bounds 4" onclick="setBounds(4)">
        <input type="button" value="Bounds 5" onclick="setBounds(5)">
    </div>
​
</body>
​
</html>
​
 
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers