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
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’);
}
?>
$(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)
Hola Daniel.
Tiene que revisar la variable form que define al formulario html. Lo que tienes que hacer es escapar las comillas dobles con un slash invertido asi ->
Puedes ver el demo aquí:
https://www.www.ribosomatic.com/ejemplos/gmaps-form/maps_form.php
Espero se soluciones tu problema.
Hola, esto te guarda los marcadores para próximas visitas?
No hace falta MySQL?
Gracias, muy interesante.
iSus:
Asi es. Los datos se guardan en un archivo XML y no necesitan MySQL.
Saludos.
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.
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.
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
Haber Isus, espero no sea demasiado tarde, aca te dejo en link con los archivos de ejemplo: https://www.www.ribosomatic.com/ejemplos/gmaps-form/gmaps-form.zip
No puede acceder al link que me dejastes. Me cuentas.
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.
Isus:
Averiguando SimpleXML es una extension de PHP la cual debe estar activada para usarse, y es parte de la versión 5.0
Disculpa por no mencionar esto antes. Asi que asegurate que tu hosting tenga esa versión de PHP, por lo de la API de Gmaps y jQuery no hay problema.
http://php-es.com/ref.simplexml.html
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.
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.
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.
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
Hola, tu script me sirvio de gran ayuda muchas grcias. –
Lo examiné y lo adopte a mi necesidad.
Muchas gracias
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
porque no subes los archivos amigo daniel