- Estréllate y Arde - https://www.estrellateyarde.org -

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
  • Representaremos las geo-localizaciones de los terremotos en un mapa de Google Maps (maps.google.com), 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:

  1. Si usamos un CMS probablemente no nos funcionen ciertas funciones, de manera que vamos a insertar el mapa en nuestra página mediante un iframe. Pondremos este código:
    <iframe
      align="center"
      src="/wp-content/uploads/file/google-maps-usgs.php"
      title="Google Map"
      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>
  2. El archivo /wp-content/uploads/file/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=TU-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>
  3. Este es el mapa que veremos en nuestra página, con información en tiempo real:

    Mashup Google Maps


Article printed from Estréllate y Arde: https://www.estrellateyarde.org

URL to article: https://www.estrellateyarde.org/discover/mashup-google-maps-php

Copyright © 2010 Estrellate y Arde