- 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).
Veamos el 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>
<!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>
Article printed from Estréllate y Arde: https://www.estrellateyarde.org
URL to article: https://www.estrellateyarde.org/discover/mashup-google-maps-php
Click here to print.
Copyright © 2010 Estrellate y Arde