Geocoder google maps api v3 - result types en ingles

morzamorza · #1 (**permalink**) 10/03/2011, 15:55

Buenas,
Estuve viendo algunos de los codigos de los demo en google y encontre uno que me gusto mucho. Al ingresar la latitud y longitud me arroja los datos desde la numeracion hasta el pais, si es que hubisen todos esos datos.
El problema que tengo que es que los tipos de datos que me tira me tira en ingles, el TITULO del dato, ej: en vez de calle o ruta, me arroja ROUTE, etc.
Aca esta el codigo. Existe alguna manera de hacer que esos titulos, los TYPES aparezcan en español?

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

<script type="text/javascript">
var map;
var geocoder;

function initialize() {

//Inicializamos geocoder y centramos el mapa en la ubicación del visitante
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-25.306864, -57.602863);

//Creamos el mapa
var myOptions = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);

//MARKER
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"ACA",
icon: 'http://google-maps-icons.googlecode.com/files/car.png'
});

}

function actualizaUbicacion()
{
var latlng = new google.maps.LatLng(-25.306864, -57.602863);

if (geocoder)
{
geocoder.geocode({'latLng': latlng}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
if (results[1])
{
var reverse_geo = results[0];

var text = "<strong>INFORMACION:<br/></strong>";

if (reverse_geo.address_components[0]) { text = text + "<strong>" + reverse_geo.address_components[0].types + ": </strong>" + reverse_geo.address_components[0].long_name + "<br />"; }
if (reverse_geo.address_components[1]) { text = text + "<strong>" + reverse_geo.address_components[1].types + ": </strong>" + reverse_geo.address_components[1].long_name + "<br />"; }
if (reverse_geo.address_components[2]) { text = text + "<strong>" + reverse_geo.address_components[2].types + ": </strong>" + reverse_geo.address_components[2].long_name + "<br />"; }
if (reverse_geo.address_components[3]) { text = text + "<strong>" + reverse_geo.address_components[3].types + ": </strong>" + reverse_geo.address_components[3].long_name + "<br />"; }
if (reverse_geo.address_components[4]) { text = text + "<strong>" + reverse_geo.address_components[4].types + ": </strong>" + reverse_geo.address_components[4].long_name + "<br />"; }
if (reverse_geo.address_components[5]) { text = text + "<strong>" + reverse_geo.address_components[5].types + ": </strong>" + reverse_geo.address_components[5].long_name + "<br />"; }
if (reverse_geo.address_components[6]) { text = text + "<strong>" + reverse_geo.address_components[6].types + ": </strong>" + reverse_geo.address_components[5].long_name + "<br />"; }

document.getElementById('info').innerHTML = text;
}
}
else
{
document.getElementById('info').innerHTML = "No hay información de Reverse Geocoding.";
}
});
}
}

</script>

abimaelrc · #2 (**permalink**) 06/04/2011, 23:27

Trata colocando la llave language=es en la ruta que carga la api.

morzamorza · #3 (**permalink**) 07/04/2011, 04:46

gracias por la respuesta. ya habia probado eso y aun asi no cambiaba el idioma.
alguna otra sugerencia?
saludos !

abimaelrc · #4 (**permalink**) 07/04/2011, 06:30

Trabajando con tu código me di cuenta, que es lo que quieres hacer en realidad. Se supone que el método de geocode tiene una propiedad llamada language. Lo traté y no me salió tampoco que se mostrara en español. Pero ¿qué te detiene el tu hacerlo, si le estás especificando unos campos en sí? Otra cosa no existe en el primer argumento que es una referencia a google.maps.GeocoderRequest una propiedad llamada latlng, sí existe una llamada location.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    #info{
        width: 350px;
        position: relative;
        top: -150px;
        margin: 0 auto;
        background-color: #fff;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
 
<script type="text/javascript">
window.onload = function(){
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-25.306864, -57.602863);
    var options = {
        zoom: 16
        , center: latlng
        , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    var map = new google.maps.Map(document.getElementById('map'), options);
 
    //MARKER
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"ACA",
        icon: 'http://google-maps-icons.googlecode.com/files/car.png'
    });
 
    if (geocoder){
        var geoRequest = {
            'location' : latlng
            , 'language' : 'es'
        }
        geocoder.geocode(geoRequest, function(results, status){
            if (status == google.maps.GeocoderStatus.OK){
                if (results[1]){
                    var reverse_geo = results[0];
 
                    var text = "<strong>INFORMACION:<br/></strong>";
 
                    if (reverse_geo.address_components[0]) { text = text + "<strong>Ruta: </strong>" + reverse_geo.address_components[0].long_name + "<br />"; }
                    if (reverse_geo.address_components[1]) { text = text + "<strong>Localidad: </strong>" + reverse_geo.address_components[1].long_name + "<br />"; }
                    if (reverse_geo.address_components[2]) { text = text + "<strong>Sub-localidad: </strong>" + reverse_geo.address_components[2].long_name + "<br />"; }
                    if (reverse_geo.address_components[3]) { text = text + "<strong>Área administrativa: </strong>" + reverse_geo.address_components[3].long_name + "<br />"; }
                    if (reverse_geo.address_components[4]) { text = text + "<strong>País: </strong>" + reverse_geo.address_components[4].long_name + "<br />"; }
                    document.getElementById('info').innerHTML = text;
                }
            }
            else{
                document.getElementById('info').innerHTML = "No hay información de Reverse Geocoding.";
            }
        });
    }
};
</script>
</head>
<body>
    <div id="map"></div>
    <div id="info"></div>
</body>
</html>

morzamorza · #5 (**permalink**) 07/04/2011, 06:33

lo puedo hacer yo pero al ponerle yo el titulo la respuesta del reverse geocode puede variar:
(reverse_geo.address_components[0]) me puede devolver el numero de la calle si es que hay como me puede devolver solo el pais, el 0 seria lo mas especifico que encuentra, el 1 seria el siguiente y asi sucesivamente, el problema es que no siempre el 0 va a ser la numeracion de la calle porque no siempre devuelve ese valor.

abimaelrc · #6 (**permalink**) 07/04/2011, 06:51

Podrías crearlo tu mismo, algo así

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>test</title>
    <style>
    *{ margin: 0; padding: 0; }
    html, body, #map{
        width: 100%;
        height: 100%;
    }
    #info{
        width: 350px;
        position: relative;
        top: -150px;
        margin: 0 auto;
        background-color: #fff;
    }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&amp;language=es"></script>
 
<script type="text/javascript">
window.onload = function(){
    var geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-25.306864, -57.602863);
    var options = {
        zoom: 16
        , center: latlng
        , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    var map = new google.maps.Map(document.getElementById('map'), options);
 
    //MARKER
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title:"ACA",
        icon: 'http://google-maps-icons.googlecode.com/files/car.png'
    });
 
    if (geocoder){
        var geoRequest = {
            'location' : latlng
            , 'language' : 'es'
        }
        geocoder.geocode(geoRequest, function(results, status){
            if (status == google.maps.GeocoderStatus.OK){
                if (results[0]){
                    var reverse_geo = results[0];
                    var translateTypes = {
                        'route' : 'Ruta'
                        , 'sublocality,political' : 'Sub-localidad'
                        , 'locality,political' : 'Localidad'
                        , 'administrative_area_level_1,political' : 'Área administrativa'
                        , 'country,political' : 'País'
                    };
 
                    var text = "<strong>INFORMACION:<br/></strong>";
                    for(var i in reverse_geo.address_components){
                        var types = translateTypes[reverse_geo.address_components[i]['types']] != undefined
                            ? translateTypes[reverse_geo.address_components[i]['types']]
                            : reverse_geo.address_components[i]['types'];
                        text = text + '<strong>' + types + ':</strong> ' + reverse_geo.address_components[0].long_name + "<br />";
                    }
                    document.getElementById('info').innerHTML = text;
                }
            }
            else{
                document.getElementById('info').innerHTML = "No hay información de Reverse Geocoding.";
            }
        });
    }
};
</script>
</head>
<body>
    <div id="map"></div>
    <div id="info"></div>
</body>
</html>

Cada vez que salga uno que no tienes, lo añades al listado mencionado por translateTypes.

JavierB · #7 (**permalink**) 07/04/2011, 08:34

Hola, morzamorza

Muevo tu tema al foro de APIs y Servicios desde Javascript.

Saludos,

morzamorza · #8 (**permalink**) 31/10/2011, 12:20

antes que nada muchas gracias por la respuesta. Funciono perfectamente.
Saludos y gracias

morzamorza · #9 (**permalink**) 31/10/2011, 12:28

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>

morzamorza · #10 (**permalink**) 31/10/2011, 12:30

Código HTML:

Ver original<!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_canvas"), 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>

vicato · #11 (**permalink**) 21/03/2012, 13:52

Tengo una consulta con respecto al tema del promedio entre la lat y lng para posicionar el mapa en el centro.

Yo estoy cargando lo puntos a través de la generación del xml que lee el maps, pero mi problema actual es realizar la rutina para que me posicione el mapa de acuerdo al promedio de los puntos que van ingresando, como podría hacerlo ???

for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var h = markers[i].getAttribute("h");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
}

aqui podría yo obtener el promedio de la latitud y longitud ?

soy un novato en javascript y de verdad necesito realizar esa labor.

Agradecería su ayuda.

vero00809_chinita · #12 (**permalink**) 26/07/2012, 16:49

haber una pregnta ya tengo un mapa con un market pintado mi pregunta es la siguiente
como colocar en la pantalla la latitud y longuitud abajo del mapa al darle click
si este es mi codigo
<html >
<head>
<title>Experimento uno de JavaScript de Google Maps: autocompletado de lugares</title>
<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=places"
type="text/javascript"></script>

<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
#map {
height: 400px;
width: 600px;
margin-top: 0.6em;
}
input:focus {
outline: none;
}
</style>

<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(19.8793216666667, -98.969705),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.bindTo('bounds', map);

var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(71, 71),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);

var address = '';
if (place.address_components) {
address = [
(place.address_components[0] &&
place.address_components[0].short_name || ''),
(place.address_components[1] &&
place.address_components[1].short_name || ''),
(place.address_components[2] &&
place.address_components[2].short_name || '')].join(' ');
}

infowindow.setContent('<div><b>' + place.name + '</b><br>' + address);
infowindow.open(map, marker);
});

// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
var setupClickListener = function (id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function () {
autocomplete.setTypes(types);
});
}

setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div>
<input id="searchTextField" type="text" size="50">
<input type="radio" name="type" id="changetype-all" checked> Todo
<input type="radio" name="type" id="changetype-establishment"> Establecimientos
<input type="radio" name="type" id="changetype-geocode"> Códigos geográficos
</div>
<div id="map"></div>
</body>
</html>