Enviar formularios desde mapas de Google con Ajax

10 de marzo de 2009

Cómo enviar un formulario con Ajax desde una ventana de información de un mapa de Google.

En este artículo vamos a mostrar cómo enviar un formulario con Ajax, desde un mapa de Google Maps. Este formulario se muestra en una ventana de información de una marca de Google Maps y para enviarlo vamos a utilizar Xajax, cuyo uso ya hemos explicado en el Manual de DesarrolloWeb.com del framework Xajax .

Antes de comenzar, también conviene decir que tenemos un Manual de creación de Mapas de Google, en el que se explican con detalle asuntos que damos por sabidos en este artículo, como la generación de marcas en mapas de Google.
Para empezar, crearemos una función que cargará un mapa de Google en el que al pulsar sobre el mapa, se muestre una marca con una ventana de información que contendrá el formulario.

El código para incluir el formulario en la ventana de información es el siguiente:

var texto_formulario="<br /><form name=form_textarea>Escribe algo y pulsa enviar:<br><textarea cols=25 rows=3 name=texto></textarea><p /><input value=Enviar type=button onclick=xajax_enviar_textarea(document.form_textarea.texto.value) /> </form>";

marker.openInfoWindowHtml("<span style='font-size: 8pt; font-family: verdana'>"+ texto_formulario + "</span>");

Finalmente, creamos una función que procese los datos enviados desde el formulario. En este ejemplo, simplemente se muestra dentro de un DIV el texto que se ha enviado.

function enviar_textarea($texto){
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("texto_mapa","innerHTML",$texto);
   return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("enviar_textarea");

A continuación mostramos el código completo del ejemplo.

<?
$raiz = "../";
require ($raiz . 'xajax/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

function enviar_textarea($texto){
   $respuesta = new xajaxResponse('ISO-8859-1');
   $respuesta->addAssign("texto_mapa","innerHTML",$texto);
   return $respuesta;
}

//asociamos la función creada anteriormente al objeto xajax
$xajax->registerFunction("enviar_textarea");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<?
$xajax->printJavascript($raiz . "xajax/");
?>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=AQUI-TU-CLAVE-GOOGLE-MAPS" type="text/javascript">
</script>
<script type="text/javascript">
   function load() {
      if (GBrowserIsCompatible()) {
         var map = new GMap2(document.getElementById("map"));
         map.addControl(new GLargeMapControl());
         map.addControl(new GMapTypeControl());
         map.setMapType(G_NORMAL_MAP);
         map.setCenter(new GLatLng(30,0),2);
         punto=map.getCenter();
         zoom=map.getZoom();
         var marker = new GMarker(punto);
         GEvent.addListener(map, "click", function (overlay,punto){
            //formulario para la ventana de informacion del mapa
            var texto_formulario="<br /><form name=form_textarea>Escribe algo y pulsa enviar:<br><textarea cols=25 rows=3 name=texto></textarea><p /><input value=Enviar type=button onclick=xajax_enviar_textarea(document.form_textarea.texto.value) /></form>";
            marker.setPoint(punto);
            map.addOverlay(marker);
            marker.openInfoWindowHtml("<span style='font-size: 8pt; font-family: verdana'>"+ texto_formulario + "</span>");

         });

      }
   }

   window.onload=load;
</script>
<style type="text/css">
   html,body{
      margin:0px; height:100%;
   }
</style>
</head>

<body>
   <div style="margin: 10px 10px 10px 10px;"><strong>Hacer clic en el mapa:</strong></div>
   <?//mostrar el mapa?>
   <div id="map" style="height: 400px; width: 600px; margin: 10px 10px 10px 10px;"></div>
   <p>
   <div style="margin: 10px 10px 10px 10px;"><strong>Texto enviado desde el mapa:</strong></div>
   <?//mostrar el texto enviado desde el mapa?>
   <div id="texto_mapa" style="margin: 10px 10px 10px 10px;"></div>
</div>
</body>
</html>

Gema Maria Molina Prados

Equipo DesarrolloWeb.com

Manual

Trabajo con Ajax en PHP utilizando Xajax

Comet en PHP con Xajax

Navegación por Pestañas con Esquinas Redondeadas: Xajax + NiftyCube