Integración GoogleMaps

De MorfeoWiki

Descripción

Se desea integrar un control GoogleMaps de modo que reaccióne ante "eventos" producidos en otros controles. Por ejemplo al seleccionar una "actividad" en el control bandeja (o pinchar en Localizar), la actividad se mostrara localizada en el Mapa de control GoogleMaps

Especificación

Google Maps goza de un API altamente integrable en cualquier página Web o interfaz de cara al usuario final. Este gadget debe ocuparse de la complicada labor de intercomunicar entre sí dos recursos finales distintos dentro de un Mashups de interfaces, bien a través de un paso de mensajes, bien logrando una comunicación a través de una capa superior que abstraiga el mashup global y conozca cada interfaz que conforma el servicio global.

El recurso Google Maps aparece totalmente definido y estandarizado aquí.

Para manejarlo, se emplean funciones que manejan el script cliente. Se crea el mapa original y se centra con el constructor GMap2 y la función setCenter, etc.

El gadget debe ocuparse de captar el evento del recurso al que se aplica el propio gadget, traducir la posible localización asociada al evento (idealmente captada en un campo XML específico del recurso en cuestión), y parsear la localización a funciones de la API de Google Maps para crear un mapa asociado al evento del recurso.

Este gadget, en principio, puede actuar sobre cualquier tipo de evento de cualquier tipo de recurso. Basta con estandarizar el/los campo/s "localización" sobre los que realizar el mapa y crearlo.

Caso de uso

Para convertir una página existente en un gadget de Google IG, ya sabemos que basta con indicarlo en la etiqueta Content. Pues bien, ahora el documento html al que hacemos referencia es un mapa de Google Maps personalizado. Para ello, en primer lugar, definimos un mapa, indicandole el centro de éste. La coordenada del centro se puede obtener vía Google, buscando simplemente "coordenadas Madrid" si lo que queremos es buscar las coordenadas de Madrid (vendra en grados, minutos y segundos, asi que a dividir por 60 y 3600). Una vez esto, ya tenemos un mapa centrado. Hay unas cuantas posibilidades interesantes. Las más interesantes para el caso que nos ocupa pueden ser la adición de "markers" y de ventanas de información. Nos puede interesar, dadas unas coordenadas, no solo centrar el mapa, sino mostrar un "pin" en un lugar determinado. Esto se hace añadiendo un "marker". Además, puede ser muy util mostrar junto a ese "marker" una ventana con texto, indicando qué es lo que señala ese "marker". Esto se puede añadir textualmente sin más, pero lo interesante es que también se puede obtener a través de un fichero XML. Mediante la función GDownloadUrl, podemos obtener la información de un fichero determinado. Parseando ese fichero, podemos llegar a tener la información que necesitamos (como por ejemplo las localizaciones tanto del centro del mapa como de los "markers"). Este sería un ejemplo de cómo utilizar el GDownloadUrl:

GDownloadUrl("data.xml", function(data, responseCode) {
  var xml = GXml.parse(data);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
    map.addOverlay(new GMarker(point));
    map.openInfoWindow(point, document.createTextNode(markers[i].getAttribute("cad")));

  }
});

Como vemos, hacemos referencia a un fichero data.xml. Este fichero contendrá una etiqueta "markers" donde se encontrará la informacion de la latitud (lat), longitug (lng) y la cadena de texto a mostrar en la ventana (no se porqué pero solo muestra la última ventana, quizá solo acepte una ventana por mapa). Fichero data.xml:

<markers>
  <marker lat="43.2647" lng="-2.94890" cad="Joan"/>
  <marker lat="43.2749" lng="-2.94590" cad="Marc"/>
  <marker lat="43.2847" lng="-2.94390" cad="Neus"/>
  <marker lat="43.2447" lng="-2.95090" cad="Philip"/>
</markers>