area en google maps

xabi · #1 (**permalink**) 05/12/2008, 08:54

Buenaaaaas.

Estoy trabajando con la api de goolge maps y mi nuevo reto es el siguiente.

Al hacer click sobre el mapa, y añadiéndole un radio, que dibuje un circulo definiendo el area.

He conseguido sacar la longitut y latitud de un punto(al hacer click) pero no consigo establecer un area.

No se si google maps tiene algun metodo para hacer lo que pretendo o de lo contrario abria que definir varios puntos de la circunferencia y unirlos.

Gracias por la ayuda. Un saludo.

GatorV · #2 (**permalink**) 05/12/2008, 09:51

Tema trasladado a Javascript.

jlueiza · #3 (**permalink**) 05/12/2008, 11:47

http://esa.ilmari.googlepages.com/circle.htm

talvez esto te sirva ;)

xabi · #4 (**permalink**) 09/12/2008, 03:44

Gracias,

es lo que necesitaba.

Un saludo

vero00809_chinita · #5 (**permalink**) 28/09/2012, 14:19

una pregunta y para un circulo con el click y se ponga donde le damos el clik ademas colocar
las propiedades como seria su lat long y su radio se podria
mi codigo es
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps</title>
<style type ="text/css">
#map_canvas{
height:600px;
width:1350px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var marker, myCircle, map;
function initialize() {
var myLatlng = new google.maps.LatLng(19.543937,-99.190802);
var mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canva s'),
mapOptions);

google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng);

});
}

function addMarker(latLng) {
//clear the previous marker and circle.
if (marker != null) {
marker.setMap(null);
myCircle.setMap(null);
}

marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true
});

//circle options.
var circleOptions = {
strokeColor: '#00786c',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00786c',
fillOpacity: 0.35,
map: map,
center: latLng,
radius: 3000
};
//create circle
myCircle = new google.maps.Circle(circleOptions);

//when marker has completed the drag event
//recenter the circle on the marker.
google.maps.event.addListener(marker, 'dragend', function () {
myCircle.setCenter(this.position);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

#6 (**permalink**) 01/10/2012, 08:57

El tema es viejo y siempre te recomendarán abrir un nuevo tema.

(Para los administradores, sería importante cerrar temas de más de xx tiempo. es solo una idea)

Te respondo: La declaración de variable yo la corregiría por:

Código Javascript:

Ver originalvar marker;
var myCircle;
var map;

De tu código se muestra el círculo (área 3 kms. salvo que me digan lo contrario).

¿Quieres la ventanita de información?:

Código Javascript:

Ver originalinfowindow = new google.maps.InfoWindow();
/* esto puedes ponerlo en la declaración de variables o después de la declaración delmapa */
google.maps.event.addListener(map, 'click', function(event) {
infowindow.setContent(lo que quieras que muestre tu pantalla - texto con o sin variable vs. datos o el html que generes);
}

P.D.: en estilos, si quieres que cubra el 100% de pantalla, no lo fijes por px o muchos usuarios perderán datos del ancho

Código CSS:

Ver original<style type ="text/css">
#map_canvas{
height:90%; /*me reservo poner un título o línea*/
width:100%;
} 
</style>

zerokilled · #7 (**permalink**) 01/10/2012, 09:24

@vero00809_chinita,
por favor, no revivas temas antiguos. si deseas continuar el tema, realiza un nuevo tema haciendo referencia al tema que deseas continuar junto con tu mensaje. de igual forma, si quieres agradecer a alguien, puedes hacerlo otorgando puntos de karma con algún mensaje, o bien dejandole un mensaje de visita en el perfíl del miembro.

gracias por su cooperacion