Google Maps - Get viewport

by Marko Kovacevic

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=drawing&amp;dummy=.js"></script>
<div id="map_canvas"></div>
<button id="btn">Hent viewport</button>
<div id="viewport"></div>

CSS

#map_canvas {
    width:100%;
    height:250px;
    border: 1px solid #4D2722;
}

JavaScript

$(function() {
    var myLatlng = new google.maps.LatLng(-35,);
    var myOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
    //var vp = loadViewport();
    //$('#viewport').html(vp);
    
    $('#btn').click(function() {
        var vp = loadViewport();
        $('#viewport').append(vp + '<br>');
    });
           
    // http://www.codefx.biz/2011/12/google-maps-api-v3-query-current-viewport
    function loadViewport() {
        var b = map.getBounds();
        $.minX = b.getSouthWest().lat();
        $.maxX = b.getNorthEast().lat();
        $.minY = b.getNorthEast().lng();
        $.maxY = b.getSouthWest().lng();
        $.url = 
            "minX="  + $.minX +
            "&maxX=" + $.maxX +
            "&minY=" + $.minY +
            "&maxY=" + $.maxY;
        return $.url;
    }
});