Con respecto a este mismo tema, tengo otra duda.
Suponiendo que mi html recibe dos vectores, uno lat y otro lon, en base a estos yo quiero agregar markers sobre un mapa y al mismo tiempo hacer un reverse geocoding de cada punto para luego imprimir en pantalla
LAT LON INFORMACION
El tema es que en informacion siempre me sale undefined. Ahora bien si en vez de crear un vector posicion [] que vaya almacenando la variable "text" en la funcion "codeLatLng" hago:
document.getElementById('info').innerHTML = text;
y luego pongo un div id=info en vez de imrpimir el posiciones[] en el body, ahi si resulta pero cambiando por cada posicion.
Lo que exactamente quiero hacer es.
Busque lat[1] lon[1], cree el punto[1] (como nuevo punto de google maps) luego con este punto llama a drop y este llama a addMarker que agrega el punto[1] en el mapa, luego que llame a codeLatLng para punto[1] y que guarde el resultado String del geocoder en posiciones[1].
Se podra hacer??
Esto es lo que tengo hasta ahora.
Saludos y gracias !!!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//VARIABLES
var lat = [-34.58609,- 25.40101,- 25.4157,- 25.40614,- 25.42922,- 25.4211,- 25.38474,- 25.3491];
var lon = [-58.414307,- 57.57554,- 57.55637,- 57.54233,- 57.54504,- 57.53866,- 57.54989,- 57.57423];
var puntos = [];
var Clat=0;
var Clon=0;
var j=0;
var i = 0;
var markers = [];
var iterator = 0;
var map;
var geocoder;
var iterator2 = 0;
var posiciones = [];
//PROMEDIO DE LAT Y LON PARA CENTRAR EL MAPA
for (j = 0; j < lat.length; j++) {
puntos[j] = new google.maps.LatLng(lat[j], lon[j]);
Clat = Clat + lat[j];
Clon = Clon + lon[j];
}
var latitud = Clat / j;
var longitud = Clon / j;
//CENTRO EL MAPA
var center = new google.maps.LatLng(latitud, longitud);
//CARGO EL MAPA
function initialize() {
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById("map_canva s"), mapOptions);
}
//TIRO LOS MARKERS
function drop() {
for (var i = 0; i < puntos.length; i++) {
numero = i + 1;
setTimeout(function() {
addMarker();
codeLatLng();
}, i * 1000);
}
}
//AGREGO MARKER
function addMarker() {
var titulo = "Punto:" + String(iterator);
markers.push(new google.maps.Marker({
position: puntos[iterator],
map: map,
title: titulo,
draggable: false,
animation: google.maps.Animation.DROP
}));
iterator++;
}
//GEOCODIFICO
function codeLatLng() {
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'latLng': puntos[iterator2] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
var reverse_geo = results[0]
var text = "";
text = text + reverse_geo.formatted_address;
posiciones[iterator2] = text;
}
}
});
iterator2++;
}
</script>
</head>
<body onload="initialize(),drop()">
<table>
<tr>
<td>
<div id="map_canvas" style="width: 500px; height: 400px;"></div>
</td>
<td>
<table>
<tr>
<td>
PUNTO</td>
<td>
LATITUD</td>
<td>
LONGITUD</td>
<td>
GEOCODER</td>
</tr>
<tr>
<td>
<script type="text/javascript">
for (var i = 0; i < lat.length; i++) {
var numero = i + 1;
document.write(numero + "<br>");
}
</script>
</td>
<td>
<script type="text/javascript">
for (var i = 0; i < lat.length; i++) {
document.write(lat[i] + "<br>");
}
</script>
</td>
<td>
<script type="text/javascript">
for (var i = 0; i < lon.length; i++) {
document.write(lon[i] + "<br>");
}
</script>
</td>
<td>
<script type="text/javascript">
for (var i = 0; i < lat.length; i++) {
document.write(posiciones[i] + "<br>");
}
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>