Ejemplo de mashup con Google Maps y PHP

Vamos a ver un pequeño ejemplo de aplicación web híbrida (mashup).

Tomaremos como datos de partida uno de los feed del U.S. Geological Survey, el feed ‘Terremotos en las últimas 24 horas de intensidad superior a 2.5′. La URL del feed es:
http://earthquake.usgs.gov/eqcenter/catalogs/1day-M2.5.xml

En un mapa de Google Maps (maps.google.com) representaremos las geo-localizaciones de los terremotos colocando marcas de distintos colores (verde, amarillo, rojo) en función de la intensidad del terremoto.

El feed tenemos que procesarlo para extraer los datos, teniendo para ello varias opciones. En PHP, por ejemplo, podemos utilizar la extensión SimpleXML que permite convertir un XML en un objeto que puede ser procesado con selectores de propiedades e iteradores de matrices.

Veamos el código

Podemos insertar el mashup en nuestra página mediante:

include('downloads/google-maps-usgs.php');

Si usamos un CMS quizá no nos funcionen ciertas funciones. En ese caso podemos insertar el mapa en nuestra página mediante un iframe. Pondremos este código:

<iframe
  align="center"
  src="/downloads/google-maps-usgs.php"
  title="Google Maps USGS"
  width="450px" height="700px"
  scrolling="no"
  frameborder="0">
Si estas viendo esto, tu navegador no soporta IFRAMEs.
Deberias actualizar a un navegador mas moderno.
</iframe>

El archivo google-maps-usgs.php contendrá el mapa propiamente dicho, y su contenido será el siguiente:

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Ejemplo de mashup con USGS y Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=[your-api-key]"
 type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
  //comprobamos si el navegador es compatible con Google Maps
  if (GBrowserIsCompatible()) {
    //instanciamos un mapa con el id del <div> donde queremos mostrarlo
    var map = new GMap2(document.getElementById("map"));
    var colorado = new GLatLng(4.214943141390651,2.109375);
    map.setCenter(colorado, 1);
    map.setMapType(G_HYBRID_MAP);
    map.addControl(new GMapTypeControl());
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GOverviewMapControl());
 
    //funcion que añade una marca con etiqueta
    function createMarker(point, icon, tag) {
      var marker = new GMarker(point, icon);
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(tag);
      });
      return marker;
    }
 
    //procesar el feed con PHP
    <?php
    //URL del feed
    $feed = 'http://earthquakes.usgs.gov/eqcenter/catalogs/1day-M2.5.xml';
 
    //volcar el feed en un objeto SimpleXML
    $xml = simplexml_load_file($feed);
 
    //extraer datos del feed
    $feedtitle = $xml->title;
    $feedsubtitle = $xml->subtitle;
    $feedauthor = $xml->author->name;
    $feedurl = $xml->id;
    foreach ($xml->entry as $entry) {
      $title = $entry->title;
 
      //calculamos la magnitud
      $espacio = strpos($title, " ") + 1;
      $coma =  strpos($title, ",") + 1;
      $caracteres = $coma - $espacio - 1;
      $magnitud = substr($title, $espacio, $caracteres);
      $title = substr($title, $coma + 1);
 
      //extraemos el punto GeoRSS
      $punto = $entry->children('http://www.georss.org/georss')->point[0];
      $punto = str_replace(" ", ",", $punto);
      ?>
 
      //salimos de PHP y volvemos a la API de JavaScript de Google Maps
      //añadir una marca
      var icono = new GIcon(G_DEFAULT_ICON);
      if(<?php echo $magnitud; ?> <= 3.5)
        icono.image = "/photos/iconos_google_maps/marker_verde.png";
      else if(<?php echo $magnitud; ?> <= 4.5)
        icono.image = "/photos/iconos_google_maps/marker_amarillo.png";
      else icono.image = "/photos/iconos_google_maps/marker_rojo.png";
 
      var point = new GLatLng(<?php echo $punto; ?>);
      var tag = "<b><?php echo $title; ?></b><br />
        <i>Magnitud <?php echo $magnitud; ?></i>";
      var marker = createMarker(point, icono, tag);
      map.addOverlay(marker);
 
    <?php
    }
    ?>
  }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<p><span style="font-size:14px;"><b><?php echo $feedtitle; ?></b></span><br />
<span style="font-size:12px;"><i><?php echo $feedsubtitle; ?></i><br />
<?php echo $feedauthor; ?> -
  <a href="<?php echo $feedurl; ?>" ><?php echo $feedurl; ?></a></span></p>
<div id="map" align="center" style="width: 450px; height: 500px"></div>
</body>
</html>

Este es el mapa que veremos en nuestra página, con información en tiempo real:

Mashup Google Maps

Artículos en la categoría "Mashups"

  1. Web scraper Dapper
  2. Editor de mashup Yahoo Pipes
  3. API de Google Maps
  4. Ejemplo de mashup con Google Maps y PHP
  5. Ejemplo de mashup con Last.fm y YouTube
  6. API de productos de Amazon

4 Comments:

  1. Gracias por este ejemplo, es muy bueno.

  2. Gracias. Me sirvió de mucho.

  3. muy buen ejemplo

  4. esta bueno el ehemplo, cuanto tiempo lleva hacer un msahop tomando en cuenta que soy un novato.