Agregar marcas en Google Maps con un formulario HTML (+ jQuery + XML + PHP)

Podemos sacarle mucho provecho a Google Maps. Una característica interesante son los marcadores ó marcas (makers) que podemos ubicar sobre los mapas. Este pequeño artículo te explica, de manera general, como podemos hacer para agregar marcas haciendo uso de un formulario HTML sobre el mismo mapa. Usaremos código PHP para guardar estos marcadores en un archivo XML. Cuando se carge nuevamente el mapa cargará las marcas guardadas en el archivo XML. Haremos uso de jQuery para el manejo de JavaScript sin complicaciones.

Primero lo primero, necesitaremos jQuery. Luego vamos a crear un archivo XML al cual nombraremos markers.xml. Con esta estructura:

<?xml version="1.0" encoding="UTF-8"?>
<markers>
</markers>

El siguiente archivo lo llamaremos maps_form.php, en resumidas cuentas realizará lo siguiente:

  • guardar los marcadores nuevos en el archivo markers.xml.
  • mostrar el mapa con los marcadores ya agregados.
  • y mostrar el formulario para agregar un nuevo marcador.
<?php
// si hay datos ...
if(isset($_POST['submit'])) {
// file_get_contents -> leer el contenido de un archivo
$fh = file_get_contents('markers.xml');

try {
// SimpleXMLElement- > leemos documentos XML
$xml = new SimpleXMLElement($fh);
} catch (Exception $e) {
// mensaje de error
echo $e->getMessage();
}

// addChild -> agregar un nodo nuevo
$marker = $xml->addChild('marker');

// atributos
$marker->addAttribute('lat', $_POST['lat']);
$marker->addAttribute('lng', $_POST['lng']);
$marker->addAttribute('msg', utf8_encode($_POST['msg']));
$marker->addAttribute('name', utf8_encode($_POST['name']));
$marker->addAttribute('link', utf8_encode($_POST['link']));

// fopen-> abre un archivo
$fp = fopen('markers.xml','w');
// fwrite-> escribe sobre un archivo
fwrite($fp, $xml->saveXML());
// fclose-> lo obvio ..
fclose($fp);

// direccionamos a la misma pagina
header('Location:maps_form.php');
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Formularios en Google Maps</title>
<!--tu codigo api para google maps aqui-->
<script src="http://maps.google.com/maps?xxx" type="text/javascript"></script>
<!-- libreria jQuery -->
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

var mark;
var pointA;

if (GBrowserIsCompatible()) {
var m = $("#map")[0];

if(m) {
var map = new GMap2(m);
// iniciamos el mapa en esta ubicacion, tu puedes ubicarla donde gustes
var start = new GLatLng(63.13450320833446,16.69921875);
// otras configuraciones
var zoomLevel = 5;
map.setCenter(start, zoomLevel);
map.addControl(new GSmallMapControl());

// lectura del archivo markers.xml con jQuery
$.get('markers.xml',function(data) {
$(data).find('marker').each(function(){
var lat = $(this).attr('lat');
var lng = $(this).attr('lng');
var html = $(this).attr('name')+"<br />";
html += $(this).attr('msg')+"<br />";
html += $(this).attr('link');
var point = new GLatLng(lat,lng);
var marker = new GMarker(point);

map.addOverlay(marker);

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});

});

});

// en cada nueva marca aparecerá el formulario HTML
GEvent.addListener(map, 'click', function(overlay, point){
if(mark) {
map.removeOverlay(mark);
}
if(point) {
pointA = new GPoint(point.x, point.y);
mark = new GMarker(pointA);
map.addOverlay(mark);
map.getCenter(point);
var lat = point.y;
var lng = point.x;
var form =
"<form action=\"maps_form.php\" method=\"post\">"+
"<input type=\"hidden\" name=\"lat\" value=\""+lat+"\" />"+
"<input type=\"hidden\" name=\"lng\" value=\""+lng+"\" />"+
"Name:<input type=\"text\" name=\"name\" value=\"\" /><br />"+
"Msg:<input type=\"text\" name=\"msg\" value=\"\" /><br />"+
"Link:<input type=\"text\" name=\"link\" value=\"\" /><br />"+
"<input type=\"submit\" name=\"submit\" value=\"save\" />"+
"</form>";
map.openInfoWindowHtml(point,form);
}
});
}
}
});
</script>
</head>

<body>
<!-- obviamente el area de nuestro mapa -->
<div id="map" style="width:1000px;height:600px;"></div>
</body>
</html>

Una interesante forma de como agregar marcadores con estilo usando un formulario. 

Vía designing4u

17 thoughts on “Agregar marcas en Google Maps con un formulario HTML (+ jQuery + XML + PHP)

  1. Me pueden ayudar con esto,
    leer el contenido de un archivo
    $fh = file_get_contents(‘marcadores.xml’);
    try {
    // SimpleXMLElement- > leemos documentos XML
    $xml = new SimpleXMLElement($fh);
    } catch (Exception $e) {
    // mensaje de error
    echo $e->getMessage();
    }
    // addChild -> agregar un nodo nuevo
    $marker = $xml->addChild(‘marker’);
    // atributos
    $marker->addAttribute(‘lat’, $_POST[‘lat’]);
    $marker->addAttribute(‘lng’, $_POST[‘lng’]);
    $marker->addAttribute(‘msg’, utf8_encode($_POST[‘msg’]));
    $marker->addAttribute(‘name’, utf8_encode($_POST[‘name’]));
    $marker->addAttribute(‘link’, utf8_encode($_POST[‘link’]));
    // fopen-> abre un archivo
    $fp = fopen(‘marcadores.xml’,’w’);
    // fwrite-> escribe sobre un archivo
    fwrite($fp, $xml->saveXML());
    // fclose-> lo obvio ..
    fclose($fp);
    // direccionamos a la misma pagina
    header(‘Location:formulario_marcadores.php’);
    }
    ?>

    Formularios en Google Maps

    $(document).ready(function() {
    var mark;
    var pointA;
    if (GBrowserIsCompatible()) {
    var m = $(“#map”)[0];
    if(m) {
    var map = new GMap2(m);
    // iniciamos el mapa en esta ubicacion, tu puedes ubicarla donde gustes
    var start = new GLatLng(10.179033,-68.003075);
    // otras configuraciones
    var zoomLevel = 8;
    map.setCenter(start, zoomLevel);
    map.addControl(new GSmallMapControl());
    // lectura del archivo markers.xml con jQuery
    $.get(‘marcadores.xml’,function(data) {
    $(data).find(‘marker’).each(function(){
    var lat = $(this).attr(‘lat’);
    var lng = $(this).attr(‘lng’);
    var html = $(this).attr(‘name’)+”
    “;
    html += $(this).attr(‘msg’)+”
    “;
    html += $(this).attr(‘link’);
    var point = new GLatLng(lat,lng);
    var marker = new GMarker(point);
    map.addOverlay(marker);
    GEvent.addListener(marker, “click”, function() {
    marker.openInfoWindowHtml(html);
    });
    });
    });
    // en cada nueva marca aparecerá el formulario HTML
    GEvent.addListener(map, ‘click’, function(overlay, point){
    if(mark) {
    map.removeOverlay(mark);
    }
    if(point) {
    pointA = new GPoint(point.x, point.y);
    mark = new GMarker(pointA);
    map.addOverlay(mark);
    map.getCenter(point);
    var lat = point.y;
    var lng = point.x;
    var form =
    “”+
    “”+
    “”+
    “Código de la unidad:
    “+
    “Dirección exacta:
    “+
    “Más información:
    “+
    “”+
    “”;
    map.openInfoWindowHtml(point,form);
    }
    });
    }
    }
    });

    Donde está el error? no carga el mapa 🙁 http://www.ettca.net/googlemapsapi/formulario_marcadores.php
    (porsia, si coloque el api key)

  2. Muchas gracias Jesús.
    Pero ahora tengo varios problemas, al principio no me enviaba ni me leía los datos del archivo markers.xml y ahora me da una serie de errores que no entiendo. Estoy perdido y es un tema urgente. Te agradecería si me pudieras echar una mano o enviar el código para que lo coteje con el que yo tengo. Yo he publicado mi prueba en http://www.ros-asociados.com/googlemaps ahí están todos los archivos: markers.xml, index.php y jquery-1.2.6.min.js
    Haz una prueba y verás los errores que te comento.
    Gracias por tu ayuda.

  3. Perdona de nuevo Jesús. He vuelto ha hacer el ejemplo con tus archivos para que encuentres el error lo más fácil posible. Está en http://www.ros-asociados.com/ejemplo-jesus los archivos los he llamado exactamente como tu maps_form.php, markers.xml y jquery-1.2.6.min.js
    Creo que el problema está en la parte de código de la página php, en la cabecera, entre las etiquetas
    Gracias de nuevo.

  4. Perdona una vez más mi insistencia, como te he comentado es algo muy urgente.
    Parece que el error está en esta línea:
    $xml = new SimpleXMLElement($fh);
    Gracias de nuevo y disculpa las molestias.
    Un saludo,
    Isusko

  5. Hola de nuevo Jesús:
    Muchísimas gracias portu respuesta y por el interés que muestras en ayudarnos. ¡No sabes lo agobiados que estamos! el viernes tiene que estar funcionando todo correctamente y no sabemos qué está ocurriendo.
    Te cuento:
    Hemos subido al servidor los archivos que nos has enviado sin tocarlos a http://www.ros-asociados.com/ejemplo-jesus2/maps_form.php Sólo hemos cambiado la API Key para que funcione en nuestro servidor.
    Al inicio, al carcar la página por primera vez, muestra bien las marcas que hay en el XML, pero en cuanto creamos y enviamos una nueva marca borra el contenido del XML.
    Si rellenamos todos los campos del formulario (Name, msg y link) da el siguiente error:
    Fatal error: Call to undefined method SimpleXMLElement::saveXML() in /expert/htwebs/www1/ftprosas/www.ros-asociados.com/ejemplo-jesus2/maps_form.php on line 28
    Si rellenamos solo dos campos (Name y msg), el error es:
    Warning: SimpleXMLElement::addAttribute() [function.SimpleXMLElement-addAttribute]: Attribute name and value are required in /expert/htwebs/www1/ftprosas/www.ros-asociados.com/maps_form.php on line 23
    Fatal error: Call to undefined method SimpleXMLElement::saveXML() in /expert/htwebs/www1/ftprosas/www.ros-asociados.com/maps_form.php on line 28
    Si sólo rellenamos el campo Name da los siguientes errores:
    Warning: SimpleXMLElement::addAttribute() [function.SimpleXMLElement-addAttribute]: Attribute name and value are required in /expert/htwebs/www1/ftprosas/www.ros-asociados.com/ejemplo-jesus2/maps_form.php on line 21
    Warning: SimpleXMLElement::addAttribute() [function.SimpleXMLElement-addAttribute]: Attribute name and value are required in /expert/htwebs/www1/ftprosas/www.ros-asociados.com/ejemplo-jesus2/maps_form.php on line 23
    Fatal error: Call to undefined method SimpleXMLElement::saveXML() in /expert/htwebs/www1/ftprosas/www.ros-asociados.com/ejemplo-jesus2/maps_form.php on line 28
    ¿Hay algún requisito de hosting? Tenemos Unix con PHP, MySQL…
    ¿Por qué borra el arcivo XML?
    ¿Algún error en el SimpleXMLElement?
    ¿Quizá tengamos que utilizar otra versión del jQuery?
    Muchas gracias por todo.
    Un saludo.

  6. Gracias de nuevo Jesús. No sabes cómo te lo agradecemos.
    Eso estábamos sospechando, que fuera algo de configuración del servidor. Ayer instalamos en otro servidor y también fallaba pero daba otro tipo de error. Hoy hemos pedido a soporte técnico que nos activen el “register_globals” y, siguiendo tus indicaciones, que nos activen también la extensión simpleXML. En cuanto lo hagan y nosotros realicemos las pruebas te comentamos el resultado para que sepas cómo ha ido y así si te encuentras algún día con el problema conozcas tb la solución.
    Gracias. Un saludo.

  7. Hola de nuevo Jesús:
    Siento comunicarte que nada. Siguiendo tus indicaciones, nos han activado la extensión SimpleXML y tenemos PHP 5, pero sigue sin funcionar.
    Ya no sabemos qué hacer. Estamos desesperados.
    Al inicio carga bien el XML pero al crear una marca nueva lo borra. ¿Es brujería?
    Creoq ue debe ser algo de configuración del servidor. Tienes algún info.php para poderlo comparar el que tenemos en nuestro servidro?
    El nuestro está en http://www.ros-asociados.com/info.php
    Gracias de nuevo.

  8. listo, ya se ve el mapa, ahora, la versión del php es 5.1.2 :@ jajaja.. bueno, se hizo el intento, gracias por responder, muy bueno el post! cuando consigas algo similar con mysql o que sirva en php 5.1.2 postealo, no sabes como te lo agradeceria jeje.. Saludos, felicitaciones por la página, muy buena.

  9. Saludos, escribo para comentar que por fín lo logre! jajaja a Isus y a la comunidad en general les ofrezco el código solo me mandan un correo y listo.. Lo que hize fue que el formulario metiera los datos en una BD mysql y despues otro archivo php genera el xml para dspues ser leido por el script.. pueden verlo funcionando en http://www.residenciaslaredo.com/ett/maps_form.php... Ahora intentaré añardirle un datagrid al lado para editar y eliminar los registros, se aceptan aportes ya que soy negado con la programacion, todo lo hago con fragmentos de codigo de muuuuuchas paginas jajaja..
    mi email daniel.acevedo.vasaitis(arroba)gmail.com

  10. Hola, tu script me sirvio de gran ayuda muchas grcias. –
    Lo examiné y lo adopte a mi necesidad.
    Muchas gracias

  11. Muchisimas Gracias por sus aportes, me encuentro en la duda y trato de cambiar el mapa de vista simple “MAPA” a poder tener las 3 opciones de Visualizacion, MAPA, SATELITE, HIBRIDO. (Quisiera que existan las 3 opciones para poder elegir, intente cambiando las lineas que estan abajo , pero no logre nada, espero una pronta ayuda, ya Gracias de antemano.
    var map = new GMap2(m);
    por
    var map = new GMap2(document.getElementById(“map_canvas”));
    ——————————-
    luego el “div”

    por

Leave a Reply

Your email address will not be published. Required fields are marked *

Proudly powered by WordPress | Theme: Wanderz Blog by Crimson Themes.