Circulos en API google Maps

RhOsS · #1 (**permalink**) 13/11/2009, 06:12

Buenos dias a todos,

estoy intentando dibujar un circulo que sea de radio constante con el zoom, he sacado el codigo de por ahi, pero no consigo hacerlo correr en un mapa sencillo:

A ver si alguien puede echarme una manita.

Gracias y un saludo.

Código:

var lastPointx = 37.352692;
var lastPointy = -4.746093;
	
  var polySmallRadius = 200;
  var polyNumSides = 20;
  var polySideLength = 18;

  for (var a=0;a<21;a++)
  {
    var aRad = polySideLength*a* (3.14/180);
    var polyRadius = polySmallRadius;
    var pixelX = lastPointx + polyRadius * Math.cos(aRad);
    var pixelY = lastPointy + polyRadius * Math.sin(aRad);
    var polyPixel = new GPoint(pixelX, pixelY);
    var polyPoint = map.fromPixelToLatLng(polyPixel,8);
    polyPoints.push(polyPoint);
  }

  var polygon = new GPolygon(polyPoints, "#000000", 1, 1, "#000000",0.1);

  aPolygons.push(polygon);
  map.addOverlay(polygon);

marcelogdiaz · #2 (**permalink**) 13/11/2009, 07:29

Hola ROhsS!

Creo que el problema es que te falta declarar la variable polyPoints...

Código:

var polyPoints = Array();    //hacerlo fuera del bucle FOR

Suerte!!!

RhOsS · #3 (**permalink**) 13/11/2009, 07:38

gracias por tu respuesta.

he probado y en la consola de errores me da error en map.fromPixelToLatLng.... is not a function
pero si que lo es no?

no se como arreglarlo...

marcelogdiaz · #4 (**permalink**) 13/11/2009, 09:30

Hola RhOsS.... el problema es que la funcion fromPixelToLatLng() no es del GMap sino que de la interfaz GProjection, por lo que le vas a tener que pedir al mapa la projection y de ahi llamar a la funcion.

Para mas info, fijate en la api oficial

Salu2!!!

RhOsS · #5 (**permalink**) 13/11/2009, 11:26

ok, a ver si lo consigo, me esta costando... voy a echarle un vistazo a la referencia a ver si me aclaro.

gracias.

RhOsS · #6 (**permalink**) 13/11/2009, 11:38

podría ser algo asi?

var mapProj=getProjection(); ó var mapProj=G_NORMAL_MAP.getProjection();

Asi le pido la pryeccion y la guardo en una variable,

para luego poner:

var polyPoint = mapProj.fromPixelToLatLng(polyPixel,8);

seria asi? algo fallo porque no aparece nada...
Se que esto ultimo es asi, porque hay que pasarle la proyeccion no?

RhOsS · #7 (**permalink**) 13/11/2009, 11:58

Buenas dejo el codigo completo por si alguien da con la tecla de porque no sale el circulo...

gracias.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=utf-8"/>
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-zEVMNfNVaqfAe9FKyfKhfBExSs9LrIQ7GOuBeSnaddg05sRmEBxQ"  type="text/javascript"></script>
<script src="markermanager.js">
</script>
<script type="text/javascript">


function load() {	
		if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById("map"));

		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl()); 
		map.addControl(new GOverviewMapControl()); 
		map.setCenter(new GLatLng(37.352692,-4.746093), 8);
	

var point = new GLatLng(37.352692,-4.746093);	
var miMarca = new GMarker(point);		
map.addOverlay(miMarca);						



var lastPointx = 37.352692;
var lastPointy = -4.746093;
	
  var polySmallRadius = 200;
  var polyNumSides = 20;
  var polySideLength = 18;
  var polyPoints = new Array();
  var aPolygons = new Array();

for (var a=0;a<21;a++)
  {
    var aRad = polySideLength*a*(3.141516/180);
    var polyRadius = polySmallRadius;
    var pixelX = lastPointx + polyRadius*Math.cos(aRad);
    var pixelY = lastPointy + polyRadius*Math.sin(aRad);
    var polyPixel = new GPoint(pixelX, pixelY);
    var polyPoint = G_NORMAL_MAP.getProjection().fromPixelToLatLng(polyPixel,8);
    polyPoints.push(polyPoint);
  }

  var polygon = new GPolygon(polyPoints, "#FF0000", 1, 1, "#FF0000",0.1);

  aPolygons.push(polygon);
  map.addOverlay(polygon); 




		
	}
	
}
window.onload=load

//]]>
</script>









<style type="text/css">
html,body{
	margin:0px;
	height:100%;
	padding:0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:7pt;
}
#map{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#enlaces{
	font-size: 12pt;
	margin-top: 10px;
	font-weight: bold;
}
#enlaces li{
	margin-bottom: 8px;
}
#pie{
	clear: both;
	padding: 10px;
	}

</style>
</head>
<body>
	
	<div id="map" ></div>
	
	
		
</body>
</html>

RhOsS · #8 (**permalink**) 14/11/2009, 13:03

Buenas,

no he conseguido representar el circulo, alguien puede echarme una mano? No me da error ni nada, pero no lo dibuja.

Muchas gracias.
Saludos!

radge · #9 (**permalink**) 26/03/2010, 11:42

Buenas , al final lo lograste ?

Yo ando buscando como crear un circulo a partir de ciertas coordenadas.

salu2 radge

xinxan22 · #10 (**permalink**) 20/04/2010, 05:41

Yo también estoy intentando dibujar un círculo en maps google...teneis la solución ya?

LUG · #11 (**permalink**) 22/04/2010, 15:00

Hola, es la primera ocasión que escribo un comentario ,
solo es para decirles que la última versión que dejo RhOsS
si se dibuja un circulo pero está en las coordenadas 80,180,
creo que el problema está en el cálculo voy a tratar de resolverlo y les comento

saludos

skatomundo · #12 (**permalink**) 23/04/2010, 07:58

Yo lo pude hacerlos referido desde esta Web, pero tuve problemas con IE 8, así es que decidí variar la "GIcon" del marcador, haciendo variable su "GSize" y "GPoint" según sea la cantidad de datos que devolvía mi consulta. Además tuve que agregar una etiqueta al marcador, lo hice con "Labeledmarker"

Si de algo les puede ayudar aquí un ejemplo usando "GGroundOverlay".

Saludos,

LUG · #13 (**permalink**) 26/04/2010, 09:44

Saludos de nuevo,

La solución que le pude dar es la siguiente tomando como base el ultimo código que dejo RhOsS espero les sea útil.

El problema que yo veo es que el cálculo está pensado en pixeles no en Latitud Longitud por lo tanto las coordenadas se deben convertir primero a con esta función G_NORMAL_MAP.getProjection().fromLatLngToPixel(pol yPixel,8);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=utf-8"/>
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUnJY3ChJhF0Y gyTSDJuVfBTqu-zEVMNfNVaqfAe9FKyfKhfBExSs9LrIQ7GOuBeSnaddg05sRmEB xQ" type="text/javascript"></script>
<script src="markermanager.js">
</script>
<script type="text/javascript">

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));

map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(37.352692,-4.746093), 8);

var point = new GLatLng(37.352692,-4.746093);
var miMarca = new GMarker(point);
map.addOverlay(miMarca);

var lastPointx = 37.352692;
var lastPointy = -4.746093;

var polyPixel = new GLatLng(lastPointx, lastPointy);
var polyPoint = G_NORMAL_MAP.getProjection().fromLatLngToPixel(pol yPixel,8);
var lastPointx = polyPoint.x;
var lastPointy = polyPoint.y;

var polySmallRadius = 200;
var polyNumSides = 20;
var polySideLength = 18;
var polyPoints = new Array();
var aPolygons = new Array();

for (var a=0;a<21;a++)
{
var aRad = polySideLength*a*(3.141516/180);
var polyRadius = polySmallRadius;
var pixelX = lastPointx + polyRadius*Math.cos(aRad);
var pixelY = lastPointy + polyRadius*Math.sin(aRad);
var polyPixel = new GPoint(pixelX, pixelY);
var polyPoint = G_NORMAL_MAP.getProjection().fromPixelToLatLng(pol yPixel,8);
polyPoints.push(polyPoint);
}

var polygon = new GPolygon(polyPoints, "#FF0000", 1, 1, "#FF0000",0.1);

aPolygons.push(polygon);
map.addOverlay(polygon);

}

}
window.onload=load

//]]>
</script>

<style type="text/css">
html,body{
margin:0px;
height:100%;
padding:0;
font-family: verdana, arial, helvetica, sans-serif;
font-size:7pt;
}
#map{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#enlaces{
font-size: 12pt;
margin-top: 10px;
font-weight: bold;
}
#enlaces li{
margin-bottom: 8px;
}
#pie{
clear: both;
padding: 10px;
}

</style>
</head>
<body>

<div id="map" ></div>
</body>
</html>

vitogq · #14 (**permalink**) 18/09/2010, 18:25

Hola, es muy interesante el tema, y me interesa para un proyecto que tengo que es calcular que hay a una distancia determinada, es decir, yo marco un alojamiento y quiero indicar que visitar en un radio de 5 km ó 10 Km. elementos q tengo en una bbdd junto con su lat y lon

Si no queda claro intentare redectar mejor la pregunta