SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

279 Plugins, 195 contribs sur SPIP-Zone, 63 visiteurs en ce moment

Accueil > Géo, carto, météo > Google Maps sobre SPIP

Google Maps sobre SPIP

7 octobre 2005 – par Martin Gaitan

Toutes les versions de cet article : [Español] [français] [italiano]

1 vote

Un tutorial para demostrar el uso de Google Maps a través de SPIP.

Google Maps es un servicio ofrecido por Google para hacer búsquedas localizadas, encontrar una dirección o recorrido, ofreciendo mapas satelitales de todo el mundo.

Google también pensó en las muchas otras aplicaciones que se podrían hacer con mapas y, en vez de invertir mucho tiempo y dinero cifrando todo y desarrollándolas, optó por permitir que la comunidad se encargase,

Así es que Google nos propone un API en javascript para insertar sus mapas en nuestros sitios, listos para hacer lo que queramos. Con esta herramienta, sitios como « beenmapped.com » florecieron en internet.

Cuando visité este sitio, pensé que la idea de marcar la procedencia de los visitantes de un sitio sobre un mapa sería una extensión simpática de SPIP. Desgraciadamente, la forma en que SPIP administra a los visitantes no permite hacer eso fácilmente. Por el contrario, es bastante fácil indicar los mensajes de foros de esta forma.

PNG

He aquí un tutorial que explica cómo utilizar Google Maps a través de esqueleto SPIP. El código propuesto sirve para indicar la procedencia de los mensajes de foros, pero no hay ninguna razón para no aplicar esto a otra información geoespacial.

Encontrarán una demostración online aquí :
-  http://6v8.gamboni.org/googlemapw.php
y aquí :
-  http://6v8.gamboni.org/googlemapw.p...

Para los impacientes, el esqueleto está al final del articulo.

API de Google Maps : ¿Cómo funciona ?

La interfaz para crear sus propios desarrollos google maps está bien documentada aquí. No obstante, para quiénes no comprenden inglés, he aquí una pequeña introducción.

Ante todo, es necesario obtener una clave para poder utilizar el servicio. Entonces comienza por ir allí :Maps API.

Diseñar el mapa

Desde una página HTML, el mapa será diseñado por el javascript de google dentro de una capa DIV vacía del documento. Es necesario entonces colocar y dimensionar esta capa en su código, por ejemplo :

<div id="map" style="width: 300px; height: 300px"></div>

A continuación se debe importar la librería proporcionada por Google utilizando la clave obtenida anteriormente :

<script src="http://maps.google.com/maps?file=api&v=1&key=su_clave" type="text/javascript"></script>

Esta librería porporciona una clase llamada GMap que se ocupa de generar los mapas. Se puede así dibujar un mapa en nuestro DIV vacío de la siguiente forma (donde "map" es el identificador del DIV en cuestión) :

var map = new GMap(document.getElementById("map"));

Tal como se indica en la documentación, es mejor probar que el navegador es compatible antes, por ejemplo con el siguiente código :

Añadir puntos sobre el mapa

Se pueden añadir puntos ("Marcadores" o "Markers" en inglés) sobre el mapa a través del objeto GMarker que toma un GPoint como parámetro. Por ejemplo :

//se crea un punto: longitud luego latitud
var point = new GPoint(0,45);
//se crea una marca simple
var mark = new GMarker(point);
//se lo añade sobre el mapa
map.addOverlay(mark);

Existen tres funciones para insertar "bocadillos" de información sobre un marcador

  1. openInfoWindow(htmlElem) que muestra el ID de un elemento de la página y su titulo en el bocadillo
  1. openInfoWindowHtml(htmlString) que toma una cadena en html para mostrar
  1. openInfoWindowXSLT(xmlElem,xsltURI) que, personalmente, no la he explorado

Se puede así hacer un simple "buenos días" sobre el mapa con el código

En este caso, el marcador tendrá siempre el bocadillo de información a la vista. En general, se querrá más bien mostrar el bocadillo si se presiona el marcador. Para eso se agrega un "listener", de la siguiente forma

GEvent.addListener(mark, "click", function() {
                       marker.openInfoWindowHtml("<b>Buenos días</b>");
                     });

Personalmente, encuentro más sencillo el método de insertar código complejo en el bocadillo de información utilizando un elemento de la página que es ocultado por defecto y es indicado por el código javascript :

Como se van a indicar muchos puntos sobre el mapa, será más sencillo llamar a una función para crear tantos marcadores como sea necesario :

Herramienta

Para este esqueleto, se deben administrar repeticiones un poco diferentes que las de {doublons} de SPIP.
Se debe introducir una función que permita almacenar los ID de los foros y recuperarlos más tarde para hacer un bucle :

Primera versión

El principio de este esqueleto es recuperar, gracias a un filtro, las coordenadas geográficas de los IP de los mensajes a través del sitio hostinfo y luego mostrar estos puntos sobre un mapa utilizando la API de Google Maps.

Se declaran en primer lugar filtros en mes_fonctions.php3 para recuperar la ubicación de los autores de cada mensaje (analizando su IP) :

  1. locateip consulta el sitio hostip y devuelve un cuadro de información sobre el IP en cuestión
  1. latitue, longitude, city y country nos permiten obtener la valiosa información de este cuadro.

En primer lugar se va a hacer un bucle que crea los puntos sobre el mapa utilizando la interfaz javascript de Google Maps :

<BOUCLE_gpoint(FORUMS) {par date} {0,50} {id_article?}>
 [
   var point#COMPTEUR_BOUCLE = new GPoint((#IP|locateip|longitude),
                                          [(#IP|locateip|latitude)]);
   var marker#COMPTEUR_BOUCLE = createMarker(point#COMPTEUR_BOUCLE,
                                             #ID_FORUM);
   map.addOverlay(marker#COMPTEUR_BOUCLE);
   [(#ID_FORUM|tampons{'trouve','forums','empile'})]
 ]
 [(#IP|locateip|latitude|sinon{#ID_FORUM}|tampons{'perdu','forums','empile'})]
</BOUCLE_gpoint>

El bucle generará el código para los 50 últimos mensajes del foro anotados en el sitio [1] :

 var point1 = new GPoint( 6.9167, 46.4333 );
 var marker1 = createMarker(point1,1024);
 map.addOverlay(marker1);

 var point2 = new GPoint( -73.5667, 45.5167 );
 var marker2 = createMarker(point2,1025);
 map.addOverlay(marker2);

Se crea un punto y un marcador para cada mensaje.

[(#IP|locateip|latitude)]) devuelve la latitud proporcionada por el filtro locateip. Se utiliza el filtro longitude para testear si la IP se ha localizado [2], sino, la última línea del código memoriza el identificador del foro que no se encontró en la pila.

Se hace a continuación un bucle « forums » que indica en una DIV oculta los mensajes de foros.

Se contiene cada mensaje en un DIV que lleva el identificador del mensaje. Entonces el código javascript generado anteriormente :

createMarker(point1,1024); creará una DIV con id=1024 conteniendo el mensaje de foro 1024. Entonces, incluso si se ocultan directamente al visitante, estos mensajes se indicarán cuando se presiona el marcador correspondiente.

Observe que esta lista se limita a los mensajes encontrados tomando el identificador de foro en el vector "localizados". Se indica también el número de mensajes de foros que no se localizaron en sobre el vector "perdidos" (« perdu ») :

aquí el esqueleto completo :

Atención

Este esqueleto, va a enviar peticiones a hostip cada vez que se recalcule, para localizar el IP. Puede decirse que la caché de SPIP nos salvará, pero como se trabaja con bucles forums, la página tendrá un delay nulo por defecto.

Así se corre el riesgo de sobrecargar al servidor de hostip y por consiguiente, que nuestras peticiones sean rechazadas. Este esqueleto es "bastante" sencillo e ilustrativo, pero no sirve realmente para una aplicación real en foros.

No obstante, este enfoque puede aplicarse a otras aplicaciones que no giren en torno a foros y aprovechar las ventajas del sistema de cacheo de SPIP, para no hacer peticiones pesadas en cada recálculo.

Les aconsejo leer la próxima sección que aborda la creación de una nueva tabla para almacenar la información géoespacial, y reducir así las consultas.

Hacer un caché de ubicaciones

Como no se puede usar la caché de SPIP para limitar el número de peticiones a hostip, debemos crear una propia.

Una nueva tabla

Para eso se va a añadir una nueva tabla en la base de spip que contendrá la información de ubicación de cada IP. Esta tabla será de la forma :

iplongitudelatitudecitycountry
193.252.104.39 3.1667 50.7 Roubaix FRANCE (FR)
202.22.239.172 166.45 -22.2667 Noumea NEW CALEDONIA (NC)

Es necesario pues crear esta tabla en la base de datos mysql. Esta es la consulta a ejecutar :

Luego se puede dar la información sobre la tabla a SPIP en el archivo mes_fonctions.php3 para poder construir bucles con ella.

Llenando la tabla

Ahora debemos llenar la nueva tabla consultando hostip. Para ello, vamos a modificar el filtro locateip para que haga la consulta correspondiente y almacene la respuesta en la base.

El filtro comprueba que se encontraron una longitud y una latitud para la IP y luego guarda estos valores en la base.

Los bucles

Vamos a modificar el bucle que generaba el código javascript con los puntos sobre el mapa.

Se hicieron varias modificaciones :

-  # ahora, IP crea los marcadores una única vez por IP, y el identificador del DIV es pues #IP y no #ID_FORUM y se utiliza (# IP|unique) para no indicar un IP que ya se trató,

  1. ya no se indica la información geoespacial con locateip. Se utiliza un bucle IP_LOCATION y las nuevas balizas introducidas con la nueva tabla para eso. Si el bucle no tiene resultados (no existe la IP en nuestra tabla), entonces sí se usa el filtro locateip para conseguir los datos necesarios

Se guardan en la base todas las entradas encontradas, pero a veces hostip no es capaz de devolver todos los datos y llena la tabla con información incompleta. Entonces se hace un bucle sobre la información incompleta para ver si la base de datos de hostip tiene nueva información :

Finalmente un bucle de los mensajes de foro encontrados para crear los DIV de cada globito de información :

Se proporciona un vínculo para verificar los datos en hostip y otro para corregir los datos en la base si tiene necesidad. La página corrigerIP.php simplemente va borrar el registro de nuestra base y redirigirnos hacia el sitio de hostip

El esqueleto final

El esqueleto final aporta otras funcionalidades. Por ejemplo, se puede entrar un identificador de artículo en el url y sólo se indicarán los mensajes en el foro de ese artículo, como así también el texto en el idioma solicitado por el usuario.

GZ - 4 ko
Squelette Complet
  1. décompresser,
  2. placer googlemap.php3, googlemap_fonctions.php3 et corrigerIP.php3 à la racine de votre site
  3. placer googlemap.html et googlemap.css dans votre repertoire squelettes,
  4. copier les fichiers de traductions googlemap_XX.php3 dans votre répertoire ecrire/lang/

P.-S.

El sitio How to Use Google Maps EZ propone otra manera de utilizar el API Google Maps haciendo abstracción del javascript. Con esta librería, todos los pedidos de adición de marcadores, etc, se hacen directamente en código HTML.

Entonces se podría imaginar este mismo esqueleto usando sólo HTML con esta librería.

Notes

[1o sobre el artículo especificado en el url gracias a {id_article?}

[2de ahí los corchetes que rodean al código

Retour en haut de la page

Tout afficher

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Formulaire de contact avancé

    23 mars 2009 – 1253 commentaires

    Un formulaire de contact configurable, avec de multiples options.

  • GIS 4

    11 août 2012 – 806 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • CookieChoices

    26 septembre – commentaires

    Affiche un avertissement à l’usage des cookies en utilisant le script cookiechoices fourni par google Introduction Par défaut, SPIP est respectueux de la vie privée de ses visiteurs et ne pose pas de cookies de traçages ou publicitaires. Ce plugin (...)

  • Plugin Vidéo(s)

    23 novembre 2010 – 526 commentaires

    Interface de gestion et modèle d’insertion des vidéos : Dailymotion Vimeo Youtube Modèle de la balise HTML5 video avec alternative flash html5media : Lecture HTML5/Flash pour tout navigateur des fichiers MP4/H264/Ogg/WebM/Mkv Support (...)

  • Champs Extras 3

    16 janvier 2012 – 345 commentaires

    Ce plugin permet de créer et/ou de gérer des champs supplémentaires dans les objets éditoriaux de SPIP. Il permet donc de prendre en compte et d’afficher de nouveaux éléments dans n’importe quel objet éditorial de SPIP. Screencast Vous n’aimez pas (...)