¿cómo podría insertar más campos en el formulario y que estos atos se envien a un email?
Me explico:
Quisiera que se pudieran localizar coordenadas en el mapa y que se pudieran añadir campos con nombre, teléfono, etc... y se enviasen tanto las coordenadas obtenidas como el resto de datos rellenados a un correo concreto. Me faltaría insertar esos campos adicionales y un botón "Enviar"
Pongo en negrita y con tamaño mayor lo que supongo que es el "form"
Gracias
Utilizo este código
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Obtener coordenadas de google maps</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta name="Description" content="obtener coordenadas de google maps de un punto, buscas la dirección y pinchas sobre el mapa para obtener o conseguir las coordenadas" />
<meta name="keywords" content="obtener coordenadas, maps, google maps, yahoo maps, conseguir coordenadas" />
<style type="text/css">
label{
width: 70px;float:left;
padding-top: 3px;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
//Declaramos las variables que vamos a user
var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;
jQuery(document).ready(function(){
//obtenemos los valores en caso de tenerlos en un formulario ya guardado en la base de datos
lat = jQuery('#lat').val();
lng = jQuery('#long').val();
//Asignamos al evento click del boton la funcion codeAddress
jQuery('#pasar').click(function(){
codeAddress();
return false;
});
//Inicializamos la función de google maps una vez el DOM este cargado
initialize();
});
function initialize() {
geocoder = new google.maps.Geocoder();
//Si hay valores creamos un objeto Latlng
if(lat !='' && lng != '')
{
var latLng = new google.maps.LatLng(lat,lng);
}
else
{
var latLng = new google.maps.LatLng(36.8334329,-3.9750259);
}
//Definimos algunas opciones del mapa a crear
var myOptions = {
center: latLng,//centro del mapa
zoom: 15,//zoom del mapa
mapTypeId: google.maps.MapTypeId.SATELLITE //tipo de mapa, carretera, híbrido,etc
};
//creamos el mapa con las opciones anteriores y le pasamos el elemento div
map = new google.maps.Map(document.getElementById("map_canva s"), myOptions);
//creamos el marcador en el mapa
marker = new google.maps.Marker({
map: map,//el mapa creado en el paso anterior
position: latLng,//objeto con latitud y longitud
draggable: true //que el marcador se pueda arrastrar
});
//función que actualiza los input del formulario con las nuevas latitudes
//Estos campos suelen ser hidden
updatePosition(latLng);
}
//funcion que traduce la direccion en coordenadas
function codeAddress() {
//obtengo la direccion del formulario
var address = document.getElementById("direccion").value;
//hago la llamada al geodecoder
geocoder.geocode( { 'address': address}, function(results, status) {
//si el estado de la llamado es OK
if (status == google.maps.GeocoderStatus.OK) {
//centro el mapa en las coordenadas obtenidas
map.setCenter(results[0].geometry.location);
//coloco el marcador en dichas coordenadas
marker.setPosition(results[0].geometry.location);
//actualizo el formulario
updatePosition(results[0].geometry.location);
//Añado un listener para cuando el markador se termine de arrastrar
//actualize el formulario con las nuevas coordenadas
google.maps.event.addListener(marker, 'dragend', function(){
updatePosition(marker.getPosition());
});
} else {
//si no es OK devuelvo error
alert("No podemos encontrar la dirección, error: " + status);
}
});
}
//funcion que simplemente actualiza los campos del formulario
function updatePosition(latLng)
{
jQuery('#lat').val(latLng.lat());
jQuery('#long').val(latLng.lng());
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16352020-14']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body onLoad="load();" onunload="GUnload();">
<p style="border: 1px solid #CCC;background-color: #EEE;color: #999;font-family: verdana;">OBTENER COORDENADAS DE UN PUNTO EN GOOGLE MAPS</p>
<form id="google" name="google" action="#">
<p><label>Dirección: </label>
<input style="width:400px" type="text" id="direccion" name="direccion" value="Competa, spain"/>
<button id="pasar">Pulse aquí antes de ubicar su posición</button>
<p><label>Latitud: </label><input type="text" readonly name="lat" id="lat"/></p>
<p><label> Longitud:</label> <input type="text" readonly name="lng" id="long"/></p>
</p>
<!-- div donde se dibuja el mapa-->
<div id="map_canvas" style="width:800px;height:540px;" ></div>
<br>
<!--campos ocultos donde guardamos los datos-->
</form>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</body>
</html>
