Hay que realizar 3 cambios en nuestra web para que se lleve a cabo la operación.
Lo primero la inserción de un script en el head.
<script src="http://maps.google.com/maps?file=api&v=3&key=ABQIAAAAp9wVclPicp2HGB4QNX-LLRTqx4D3bS478d-1w1nVZmw5mBzr_hTd8Hb4lXsLPv7hW7mRH6_tkUmJ3g" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function load() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-20.220644,-70.141869), 15);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
geocoder = new GClientGeocoder();
}
function showAddress(address, zoom) {
if (geocoder) {
geocoder.getLatLng(address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, zoom);
var marker = new GMarker(point);
map.addOverlay(marker);
document.form_mapa.coordenadas1.value = point.y;
document.form_mapa.coordenadas2.value = point.x;
}
}
);
}}
</script>
Lo segundo es modificar el tag de body.
<body onLoad="load();" onunload="GUnload();">
Lo tercero es crear el formulario para insertar la dirección y el tag div que mostrará el mapa.
<form action="#" name="form_mapa" onsubmit=" showAddress(this.address.value, this.zoom.value=parseFloat(this.zoom.value)); return false"> Dirección a buscar: <input name="address" type="text" value="" width="15" /><input type="submit" value="Ver" /><input name="zoom" size="1" type="hidden" value="15" /> Latitud: <input name="coordenadas1" type="text" value="" /> Longitud: <input name="coordenadas2" type="text" value="" /></form> <center> <div align="center" id="map" style="height: 425px; width: 425px;"> </div> </center>
No hay comentarios:
Publicar un comentario