Rectangle on Map

Using JavaScript..

by salitrapraveen

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- the Google Map will be displayed here -->
<button type="button" onclick="clearRect()">Clear</button>
<button type="button" onclick="search()">Search</button>
<div id="google_map">
</div>

<!-- this section will be used for logging purpose -->
<section id="console">  
</section>

CSS

#google_map {
    width: 90%;
    height: 500px;
    margin: 20px auto;
}

#console {
    width: 90%;
    background-color: #fff;
    color: #222;
    font-family: monospace;
    font-size: 12px;
    margin: auto;
}

JavaScript

//SOLUTION BY: PRAVEEN SALITRA
// Global variables
var map;
var marker1 = null;
var marker2 = null;
var rectangle;
var latOperator;
var lngOperator;
var SQUARE_SIDE = 0.25; //x=14.8miles, y=17.6miles
var RADIUS = 13; //=1.44 * avg(x,y)/2
var xmlHttp;
var NoResults=10;
var QTYPE='ATM';
 var baseURL = 'http://query.yahooapis.com/v1/public/yql?format=json&q=';
/**
 * Called on the initial page load.
 */

function init() {
    map = new google.maps.Map(document.getElementById('google_map'), {
        'zoom': 9,
        'center': new google.maps.LatLng(29.34, -82.00),
        'mapTypeId': google.maps.MapTypeId.ROADMAP

    });

    google.maps.event.addListener(map, 'click', function(point) {

        if (marker1 == null) {
            marker1 = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(point.latLng.lat(), point.latLng.lng()),
                draggable: true,
                title: 'Marker1'
            });
            marker2 = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(point.latLng.lat(), point.latLng.lng()),
                draggable: true,
                title: 'Marker2'
            });

            google.maps.event.addListener(marker1, 'drag', redraw);
            google.maps.event.addListener(marker2, 'drag', redraw);

            rectangle = new google.maps.Rectangle({
                map: map
            });


            redraw();
        }
    });
}

/**
 * Updates the Rectangle's bounds to resize its dimensions.
 */


function redraw() {

    var latlon0 = marker1.getPosition();
    var latlon1 = marker2.getPosition();
    var p1, p2;

    if (latlon0.lat() <= latlon1.lat() && latlon0.lng() <= latlon1.lng()) {
        p1 = latlon0; // Marker1: SW
        p2 = latlon1; // Marker2: NE
        latOperator = '+';
        lngOperator = '+';
    }
    else if (latlon0.lat() <= latlon1.lat() && latlon0.lng() >= latlon1.lng()) {
        p2 = latlon0;...