6

Tengo una aplicación en la cual me gustaría mostrar el nombre del pueblo o ciudad donde se encuentre la ubicación de la persona que utiliza la aplicación, actualmente tengo la LATITUDE y LONGITUDE. Pero ahora no sé como proceder.

navigator.geolocation.getCurrentPosition(function(pos) {
    var position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
}, function (error) {
    // Código de error
});
1

4 respuestas 4

9

Utiliza google.maps.Geocoder

lamentablemente esta documentación esta en inglés

La forma de uso es la siguiente:

var geocoder = new google.maps.Geocoder;
geocoder.geocode({
    'location': '<aquí va la latitud y longitud separadas por una coma>' 
     // ej. "-34.653015, -58.674850"
  }, function(results, status) {
      // si la solicitud fue exitosa
      if (status === google.maps.GeocoderStatus.OK) {
        // si encontró algún resultado.
        if (results[1]) {
          console.log(results[1].formatted_address);
        }
      }
});

Aquí te dejo un ejemplo funcional:

initMap();

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {
      lat: -34.653015,
      lng: -58.674850
    }
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {
    lat: parseFloat(latlngStr[0]),
    lng: parseFloat(latlngStr[1])
  };
  geocoder.geocode({
    'location': latlng
  }, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No hay resultados');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}
#map {
  height: 300px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACJapLIVhm-uVWitwICh24232jYdkP1SQ&signed_in=true"></script>
<input id="latlng" type="text" value="-34.653015, -58.674850">
<input id="submit" type="button" value="Obtenr Nombre">
<div id="map"></div>

1
  • Está perfecto, no hay problema por el inglés 😃 .
    – Chofoteddy
    Commented el 15 dic. 2015 a las 0:25
2

te dejo un ejemplo de Geolocalización inversa

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: 40.731, lng: -73.997}
  });
  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow;

  document.getElementById('submit').addEventListener('click', function() {
    geocodeLatLng(geocoder, map, infowindow);
  });
}

function geocodeLatLng(geocoder, map, infowindow) {
  var input = document.getElementById('latlng').value;
  var latlngStr = input.split(',', 2);
  var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
  geocoder.geocode({'location': latlng}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        map.setZoom(11);
        var marker = new google.maps.Marker({
          position: latlng,
          map: map
        });
        infowindow.setContent(results[1].formatted_address);
        infowindow.open(map, marker);
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });
}

Ejemplo tomado de: https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

1
  • 1
    Amigo, es un gran aporte y bienvenido al sitio, sólo falta que aportes más contenido a tu respuesta para que no sólo quede como una cita a una liga y puedas apoyar a los que también deseen encontrar esta solución.
    – Chofoteddy
    Commented el 14 dic. 2015 a las 23:16
1

Aquí tienes un ejemplo de desarrollo de un widget de meteorología donde hay un método Javascript donde se obtiene la ciudad. http://marcodetrabajo.com/widget-meteorologia-jquery/

var WeatherApi = (function() {
  /* Constantes
   *
   */

  var ENDPOINT = 'http://api.wunderground.com/api/8056d793049f14ea/'; 

  var exports = {};

      /* Función que obtiene, a partir de la latitud y longitud, el nombre de la ciudad y el código del país
       *
       * @param latitude latitud 
       * @idCountry longitude longitud
       */
      exports.getCityAndCountry = function (latitude, longitude){       
        var self = this;
        $.ajax({
          type

: 'GET',
      url: ENDPOINT + 'geolookup/q/'+ latitude +','+ longitude +'.json',
      success: function(coords){            
            self.getWeatherData(coords.location.city, coords.location.country_iso3166);             
      }
    });  
  };


  return exports;
})();

Puedes utilizar el método de la siguiente manera: WeatherApi.getCityAndCountry(tuLatitud, tuLongitud)

Saludos

0
0

Buenas tardes... Y como seria para cuando se tiene varios marcadores o puntos...

Ya que tengo esto... Obtengo desde una BD un json con latitudes y longitudes... y quiero mostrar en un datatable asi como tambien en el mapa con los markers... quiero algo asi...

---latitud: 22 | longitud: 33 | Direccion del Geocoder ---latitud: 23 | longitud: 34 | Direccion del Geocoder ---latitud: 24 | longitud: 35 | Direccion del Geocoder

        $.ajax({
            url: 'db/utilities.php?accion=listar-puntos-busqueda',
            dataType: 'json',
            success: function(resultado){

                if((resultado.length-1) > 0){

                    mostrarPuntos(resultado);
                }                    
            }
        })

var geocoder;
function mostrarPuntos(array) {

    tablaPuntos.clear().draw();

    geocoder = new google.maps.Geocoder();

    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById("map"), {
      mapTypeId: 'roadmap'
    });
    map.setTilt(50);

    var coordenadas = new Array();
    for(var i = 1; i < array.length; i++) {

        var coordenada = new Array();
        coordenada.lat = parseFloat(array[i][2]);
        coordenada.lng = parseFloat(array[i][3]);

        var punto = new google.maps.LatLng(coordenada.lat, coordenada.lng);
        bounds.extend(punto);

        geocoder.geocode({'latLng': punto}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var marker = new google.maps.Marker({
                        map: map,
                        position: punto,
                        label: array[i][0]
                    });
                    tablaPuntos.row.add( [
                        array[i][0],
                        array[i][1],
                        results[0].formatted_address
                    ] ).draw();
                }
            }
        }); 

        coordenadas.push(coordenada);
        map.fitBounds(bounds);

    }

    var ruta = new google.maps.Polyline({
        path: coordenadas,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 5
    });
    ruta.setMap(map);

}

Pero al momento de ejecutar... solo se muestra una posicion en el mapa y el primer dato en la tabla... es como si no recorriera mas en la parte del geocoder...

Donde esta el error...??

De antemano muchas gracias..

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.