colegatron/getviewport.php

## getviewport.php
<?php
/**
 * User: Ivan Gonzalez / Colegatron
 * Date: 18/07/13
 * Time: 16:14
 */

header('Content-Type: application/json');

$lat = $_GET["lat"];
$lon = $_GET["lon"];
$radio = $_GET["radius"];

if ( !$radio || !$lat || !$lon ) {
    header('HTTP/1.0 404 Not Found');
    print json_encode( array("msg" => "algun parametro no ha llegado: latitud ($lat), longitud($lon) o radio($radio)"));
}
else {
    $R = 6371;  // earth radius in km
    $x1 = $lon - rad2deg($radio/$R/cos(deg2rad($lat)));
    $x2 = $lon + rad2deg($radio/$R/cos(deg2rad($lat)));
    $y1 = $lat + rad2deg($radio/$R);
    $y2 = $lat - rad2deg($radio/$R);

    header('HTTP/1.0 200 OK');
    print json_encode(array( "x1" => $x1, "y1" => $y1, "x2" => $x2, "y2" => $y2 ));
}

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        #map-canvas, #map-canvas2 {
            margin: 0;
            padding: 0;
            width: 800px;
            height: 500px;
            border-color: black;
            border-width: 2;
            border-style: solid;
        }
    </style>
    <script src="bower_components/jquery/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map = {};
        function initialize() {
            myLatLng = new google.maps.LatLng(41.392302, 2.170207);
            var mapOptions = {
                zoom: 8,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);

            var mk = new google.maps.Marker({
                position: myLatLng,
                map: map,
                title: 'centro'
            });

            console.log("mk0");
            console.log(mk.position);


        }

        google.maps.event.addDomListener(window, 'load', initialize);


        $(document).ready(function() {
            $("#boton").click(function(el) {
                event.preventDefault();

                radius = parseInt($("#radio").val());
                lat = parseFloat($("#lat").val());
                lon = parseFloat($("#lon").val());

                $.ajax({
                    dataType: "json",
                    url: "getviewport.php",
                    data: { "lat": lat, "lon": lon, "radius": radius },
                    error: function(e) {
                        alert("Error al recuperar el jeyson, mira en la consola de errores");
                        console.log(e);
                        return true;
                    },
                    success: function(data) {
                        console.log("Datos recuperados OK");
                        console.log(data);
                        p1 = new google.maps.LatLng( data.y1, data.x1 );
                        p2 = new google.maps.LatLng( data.y2, data.x2 );
                        var mk1 = new google.maps.Marker({
                            position: p1,
                            map: map,
                            title: 'primero'
                        });
                        var mk2 = new google.maps.Marker({
                            position: p2,
                            map: map,
                            title: 'segundo'
                        });
                        return true;
                    }
                });

                return false;
            });
        });

    </script>
</head>
<body>
<div id="map-canvas"></div>
<div id="box">
    <ul>
        <form>
            <li><label>Lat:</label><input id="lat" type="text" name="lat" value="41.392302" ></li>
            <li><label>Lon:</label><input id="lon" type="text" name="lon" value="2.170207"></li>
            <li><label>Radio:</label><input id="radio" type="text" name="radio" value="3"> Km</li>

            <input type="submit" id="boton" value="Update">

        </form>
    </ul>

</div>

</body>
</html>
	<?php
	/**
	* User: Ivan Gonzalez / Colegatron
	* Date: 18/07/13
	* Time: 16:14
	*/

	header('Content-Type: application/json');

	$lat = $_GET["lat"];
	$lon = $_GET["lon"];
	$radio = $_GET["radius"];

	if ( !$radio \|\| !$lat \|\| !$lon ) {
	header('HTTP/1.0 404 Not Found');
	print json_encode( array("msg" => "algun parametro no ha llegado: latitud ($lat), longitud($lon) o radio($radio)"));
	}
	else {
	$R = 6371; // earth radius in km
	$x1 = $lon - rad2deg($radio/$R/cos(deg2rad($lat)));
	$x2 = $lon + rad2deg($radio/$R/cos(deg2rad($lat)));
	$y1 = $lat + rad2deg($radio/$R);
	$y2 = $lat - rad2deg($radio/$R);

	header('HTTP/1.0 200 OK');
	print json_encode(array( "x1" => $x1, "y1" => $y1, "x2" => $x2, "y2" => $y2 ));
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Map</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<style>
	#map-canvas, #map-canvas2 {
	margin: 0;
	padding: 0;
	width: 800px;
	height: 500px;
	border-color: black;
	border-width: 2;
	border-style: solid;
	}
	</style>
	<script src="bower_components/jquery/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
	var map = {};
	function initialize() {
	myLatLng = new google.maps.LatLng(41.392302, 2.170207);
	var mapOptions = {
	zoom: 8,
	center: myLatLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById('map-canvas'),
	mapOptions);

	var mk = new google.maps.Marker({
	position: myLatLng,
	map: map,
	title: 'centro'
	});

	console.log("mk0");
	console.log(mk.position);


	}

	google.maps.event.addDomListener(window, 'load', initialize);


	$(document).ready(function() {
	$("#boton").click(function(el) {
	event.preventDefault();

	radius = parseInt($("#radio").val());
	lat = parseFloat($("#lat").val());
	lon = parseFloat($("#lon").val());

	$.ajax({
	dataType: "json",
	url: "getviewport.php",
	data: { "lat": lat, "lon": lon, "radius": radius },
	error: function(e) {
	alert("Error al recuperar el jeyson, mira en la consola de errores");
	console.log(e);
	return true;
	},
	success: function(data) {
	console.log("Datos recuperados OK");
	console.log(data);
	p1 = new google.maps.LatLng( data.y1, data.x1 );
	p2 = new google.maps.LatLng( data.y2, data.x2 );
	var mk1 = new google.maps.Marker({
	position: p1,
	map: map,
	title: 'primero'
	});
	var mk2 = new google.maps.Marker({
	position: p2,
	map: map,
	title: 'segundo'
	});
	return true;
	}
	});

	return false;
	});
	});

	</script>
	</head>
	<body>
	<div id="map-canvas"></div>
	<div id="box">
	<ul>
	<form>
	<li><label>Lat:</label><input id="lat" type="text" name="lat" value="41.392302" ></li>
	<li><label>Lon:</label><input id="lon" type="text" name="lon" value="2.170207"></li>
	<li><label>Radio:</label><input id="radio" type="text" name="radio" value="3"> Km</li>

	<input type="submit" id="boton" value="Update">

	</form>
	</ul>

	</div>

	</body>
	</html>