<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Google Maps Geocodificación simple">
<title>Google Maps Geocodificación simple</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&language=es"></script>
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;font-family:Trebuchet MS,verdana,arial}#mapa{width:70%;height:100%;float:right}
#texto{width:25%;height:100%;float:left;vertical-align:middle;padding:2%}
#texto input.navi{font-size:18px;width:90%;height:30px;margin-bottom:10px}
</style>
<script type="text/javascript">
//<![CDATA[
var map, geocoder;
window.onload = function () { var latlng = new google.maps.LatLng(48.8656182, 2.3031914);
var mapOptions = { zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions); // llama a la funcion
geocoder = new google.maps.Geocoder();
};
function codeAddress() { var address = document.getElementById('address').value; // Función completa de Geocoding
geocoder.geocode({ 'address': address
// 'latLng': latlng si lo que queremos ejecutar en geocodificación inversa
}, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { document.getElementById('x').innerHTML = results[0].geometry.location.lat().toFixed(6); document.getElementById('y').innerHTML = results[0].geometry.location.lng().toFixed(6); map.setCenter(results[0].geometry.location);
document.getElementById('direccion').innerHTML = results[0].formatted_address; var marker = new google.maps.Marker({ map: map,
position: results[0].geometry.location
});
infowindow = new google.maps.InfoWindow({ content: results[0].formatted_address + '<br> Latitud: ' + results[0].geometry.location.lat().toFixed(6) + '<br> Longitud: ' + results[0].geometry.location.lng().toFixed(6)
});
infowindow.open(map, marker)
}
// Se detallan los diferentes tipos de error
else { alert('Geocode no tuvo éxito por la siguiente razón: ' + status) }
})
};
//]]>
</script>
</head>
<body>
<section id="texto">
<h3>Dirección a localizar</h3>
<p>Sobreescriba la dirección<br>puede indicar coordenadas lat,lng separadas por coma (,):</p>
<input id="address" type="textbox" size="38" maxlength="80" value="" placeholder="Dirección o Lat, Lng" />
<br>
Latitud: <span style="color:#FF00AA;" id="x"></span>
<br>
Longitud: <span style="color:#FF00AA;" id="y"></span>
<br>
Dirección completa:<br><span style="color:#FF00AA;" id="direccion"></span>
<br>
<input type="button" class="navi" value="Localizar" onclick="codeAddress()">
</section>
<div id="mapa"></div>
</body>
</html>
Comentarios sobre la versión: 3.18 (0)
No hay comentarios