google-maps - obtener - mapa con coordenadas geográficas
Obtén latitud y longitud según el nombre de la ubicación con la API de autocompletado de Google (7)
Tengo un cuadro de texto en mi página que obtiene un nombre de ubicación y un botón con texto getLat&Long . Ahora, al hacer clic en mi botón, debo mostrar una alerta de latitude y longitude de la ubicación en el cuadro de texto. ¿Cualquier sugerencia?
El siguiente es el código que utilicé. Está funcionando perfectamente.
var geo = new google.maps.Geocoder;
geo.geocode({''address'':address},function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
var myLatLng = results[0].geometry.location;
// Add some code to work with myLatLng
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
Espero que esto ayude
Espero que esto pueda ayudar a alguien en el futuro.
Puede utilizar la API de Geocodificación de Google , como dije antes, tuve que trabajar un poco con esto recientemente, espero que esto ayude:
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
function initialize() {
var address = (document.getElementById(''my-address''));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes([''geocode'']);
google.maps.event.addListener(autocomplete, ''place_changed'', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
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('' '');
}
});
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById("my-address").value;
geocoder.geocode( { ''address'': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
alert("Latitude: "+results[0].geometry.location.lat());
alert("Longitude: "+results[0].geometry.location.lng());
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
<body>
<input type="text" id="my-address">
<button id="getCords" onClick="codeAddress();">getLat&Long</button>
</body>
</html>
Ahora, esto también tiene una función de autocompetado que puede ver en el código, recupera la dirección de la entrada y la API la completa automáticamente mientras escribe.
Una vez que tenga su dirección, presione el botón y obtendrá los resultados mediante alerta según sea necesario. Tenga en cuenta también que utiliza la API más reciente y carga la biblioteca de "lugares" (cuando llama a la API utiliza el parámetro "bibliotecas").
Espero que esto ayude, y lea la documentación para más información, aplausos.
Editar # 1 : Fiddle
Espero que esto sea más útil para el alcance futuro contener autocompletar la función de API de Google con latitud y longitud
var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();
Vista completa
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete With Latitude & Longitude </title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#pac-input {
background-color: #fff;
padding: 0 11px 0 13px;
width: 400px;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
text-overflow: ellipsis;
}
#pac-input:focus {
border-color: #4d90fe;
margin-left: -1px;
padding-left: 14px; /* Regular padding-left + 1. */
width: 401px;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
function initialize() {
var address = (document.getElementById(''pac-input''));
var autocomplete = new google.maps.places.Autocomplete(address);
autocomplete.setTypes([''geocode'']);
google.maps.event.addListener(autocomplete, ''place_changed'', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
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('' '');
}
/*********************************************************************/
/* var address contain your autocomplete address *********************/
/* place.geometry.location.lat() && place.geometry.location.lat() ****/
/* will be used for current address latitude and longitude************/
/*********************************************************************/
document.getElementById(''lat'').innerHTML = place.geometry.location.lat();
document.getElementById(''long'').innerHTML = place.geometry.location.lng();
});
}
google.maps.event.addDomListener(window, ''load'', initialize);
</script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="lat"></div>
<div id="long"></div>
</body>
</html>
Puede usar el servicio Google Geocoder en la API de Google Maps para convertir desde el nombre de su ubicación a una latitud y longitud. Entonces necesitas un código como:
var geocoder = new google.maps.Geocoder();
var address = document.getElementById("address").value;
geocoder.geocode( { ''address'': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
// do something with the geocoded result
//
// results[0].geometry.location.latitude
// results[0].geometry.location.longitude
}
});
Actualizar
¿Está incluyendo la API javascript v3?
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">
</script>
Sugeriría el siguiente código, puede usar este <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script> para obtener la latitud y longitud de un ubicación, aunque puede no ser tan precisa, sin embargo, funcionó para mí;
fragmento de código a continuación
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript''s Geolocation API</title>
<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="mapContainer"></div>
<script type="text/javascript">
var lat = geoip_latitude();
var long = geoip_longitude();
document.write("Latitude: "+lat+"</br>Longitude: "+long);
</script>
</body>
</html>
http://maps.googleapis.com/maps/api/geocode/OUTPUT?address=YOUR_LOCATION&sensor=true
OUTPUT = json o xml;
para obtener información detallada sobre google map api, vaya a la url:
http://code.google.com/apis/maps/documentation/geocoding/index.html
Espero que esto ayude
Ingrese la ubicación por Autocompletar y el resto de todos los campos: los valores de latitud y Longititud se llenan automáticamente.
Reemplace la CLAVE API con su clave API de Google
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<textarea placeholder="Enter Area name to populate Latitude and Longitude" name="address" onFocus="initializeAutocomplete()" id="locality" ></textarea><br>
<input type="text" name="city" id="city" placeholder="City" value="" ><br>
<input type="text" name="latitude" id="latitude" placeholder="Latitude" value="" ><br>
<input type="text" name="longitude" id="longitude" placeholder="Longitude" value="" ><br>
<input type="text" name="place_id" id="location_id" placeholder="Location Ids" value="" ><br>
<script type="text/javascript">
function initializeAutocomplete(){
var input = document.getElementById(''locality'');
// var options = {
// types: [''(regions)''],
// componentRestrictions: {country: "IN"}
// };
var options = {}
var autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, ''place_changed'', function() {
var place = autocomplete.getPlace();
var lat = place.geometry.location.lat();
var lng = place.geometry.location.lng();
var placeId = place.place_id;
// to set city name, using the locality param
var componentForm = {
locality: ''short_name'',
};
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById("city").value = val;
}
}
document.getElementById("latitude").value = lat;
document.getElementById("longitude").value = lng;
document.getElementById("location_id").value = placeId;
});
}
</script>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?libraries=places&key=API KEY"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500></script>