Búsqueda personalizada

25 mayo 2007

Panoramio en vuestros mapas google maps

Tras el post publicado hace unos días sobre una ruta por el Hayedo de Tejera Negra y haber visto más detenidamente la API que Panoramio liberó hace ya unos días, veo conveniente compartir los pasos que seguí (sin duda, mejorables) para conseguir los resultados que esperaba (o, al menos, parecen los esperados).


  • Paso 1 - Obtener clave de uso para Google Maps.

En primer lugar, debemos obtener una KEY para que Google nos "preste" su fabulosa API. Para ello, vamos a la página de su retoño, y entramos en Sign up for a Google Maps API key. Tras esto, ya disponemos de una clave que podremos usar con los maps que insertemos.


  • Paso 2 - Insertar el mapa en nuestra página.
Antes de continuar en con este paso debemos asegurarnos de si vamos a hacer un uso frecuente de nuestra API, ésta va a estar, por ejemplo, en diversos post, o si, por el contrario, la misma va a estar en algún panel lateral visible de forma global.
En cualquier caso, podemos ahorrarnos el insertar código común cada vez que vayamos a añadir un mapa si parte del mismo lo localizamos, por ejemplo entre las etiquetas de nuestra página.
En mi caso, y dado que uso blogger, lo más sencillo es ir a la edición del blog, en Plantilla, y en Añadir un elemento de página escogemos el tipo HTML/Javascript.
En esta zona añadiremos:

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


Tras esto, el siguiente paso es añadir un mapa a la entrada.

A continuación creamos la función que contiene la creación de la API fmapa001() en nuestra entrada.
Ésta entrada estaría formada por el siguiente código:

<script language="JavaScript">

function fmapa001() {

var mapa001 = new GMap2(document.getElementById("mapa001"));

mapa001.addControl(new GSmallMapControl());

mapa001.setCenter(new GLatLng(40.416698,-3.70309), 17);

mapa001.setMapType(G_SATELLITE_MAP);

</script>

<div id="mapa001" style="width: 600px; height: 440px;"></div>

En esta parte del código tan sólo creamos un nuevo objeto de la clase GMap2, añadimos controladores de zoom y dirección, establecemos el centro del mapa y el zoom y mostramos el tipo de capa a imagen de satélite. Tan sólo habría que llamar a la función, insertando este otro código, para que se ejecutase y apareciese la api:

<script type="text/javascript"> fmapa001(); </script>


El Resultado sería éste:







  • Paso 3 - Carga de Imágenes Panoramio - Introducción a Json


Json es "acrónimo de "JavaScript Object Notation", es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de Javascript pero no requiere el uso de XML." según explica Wikipedia.

La estructura de un componente en notación Json podría ser la siguiente:

{ "count": 78,
"photos": [{"photo_id": 1924836, "photo_title": "Merino (Sierra de Ayllón)", "longitude": -3.425846, "latitude": 41.279032, "width": 500, "height": 375, "upload_date": "25 April 2007", "owner_id": 348931, "owner_name": "madroño"} {"photo_id": 1801714, "photo_title": "Madriguera Iglesia", "longitude": -3.331690, "latitude": 41.313677, "width": 500, "height": 307, "upload_date": "16 April 2007", "owner_id": 380555, "owner_name": "JRossi"}]};

Este código resulta muy interesante pues a través de él (definido como una estructura en javascript), podemos acceder a sus diferentes campos y obtener información muy interesante.
Así, si tenemos una variable con el contenido anterior, bastaría con escribir:
mivariable.photos[0].photo_title para obtener el título del primer "registro". De esta forma, si tuviésemos un grupo de estos registros sobre una zona concreta, sería muy fácil mostrar información de dichos puntos.
Lo interesante es que en la página de Panoramio, toda esta información podemos obtenerla como consulta:


http://www.panoramio.com/map/get_panoramas.php?order=

popularity&set=full&from=0&to=40&minx=-3.707371&miny=

40.415132&maxx=-3.69912&maxy=40.419097



Donde minx, miny, maxx, maxy representan la zona (en coordenadas) a "enfocar" y donde from=0&to=20 representa mostrar de 0 a 20 puntos. Esta consulta nos devuelve un código con la misma notación vista anteriormente.

Para hacer una consulta sobre dichos datos, Google dispone de una función que recoge estos datos, muy parecida a XHTTPRequest, llamada Gdownloadurl. El problema es que no permite hacer de forma sencilla llamadas remotas (tan sólo trabajaría con ficheros .json en el mismo dominio).

La solución está en hacer la consulta previa e incluir el código dentro del script. Una solución poco elegante, pero siempre es práctica.

Así pues, y sin más rodeos, para mostrar los típicos puntos y bubbles que estamos acostumbrados a ver en panoramio bastaría con incluir este código:


<script language="JavaScript">
var panoramio ={ "count": 385,

"photos": [{"photo_id": 1088450, "photo_title": "El casino de Madrid", "longitude": -3.700445, "latitude": 40.417470, "width": 500, "height": 393, "upload_date": "28 February 2007", "owner_id": 16430, "owner_name": "Ricardo Otero"}
,
{"photo_id": 915950, "photo_title": "Calle Gerona", "longitude": -3.706432, "latitude": 40.415081, "width": 306, "height": 500, "upload_date": "20 February 2007", "owner_id": 1015, "owner_name": "Isaac Garcia"}
,
{"photo_id": 705359, "photo_title": "Puerta del Sol", "longitude": -3.703487, "latitude": 40.416551, "width": 500, "height": 330, "upload_date": "05 February 2007", "owner_id": 98085, "owner_name": "Paco_Mendoza"}
,
{"photo_id": 702884, "photo_title": "Claudio Sanchez Albornoz", "longitude": -3.706073, "latitude": 40.417254, "width": 375, "height": 500, "upload_date": "05 February 2007", "owner_id": 134138, "owner_name": "Joaquin Toledo"}
,
{"photo_id": 633498, "photo_title": "Gallardon y Madrid (calle Preciados)", "longitude": -3.704957, "latitude": 40.418422, "width": 339, "height": 500, "upload_date": "31 January 2007", "owner_id": 28099, "owner_name": "Alvaro Martinez"}
,
{"photo_id": 571678, "photo_title": "QUIJOTE ", "longitude": -3.703530, "latitude": 40.414656, "width": 500, "height": 375, "upload_date": "25 January 2007", "owner_id": 117521, "owner_name": "Pedro José Bartolomé"}
,
{"photo_id": 556692, "photo_title": "Sol 2006", "longitude": -3.703203, "latitude": 40.416645, "width": 500, "height": 375, "upload_date": "24 January 2007", "owner_id": 117051, "owner_name": "jamming"}
,
{"photo_id": 526962, "photo_title": "DSC_0712", "longitude": -3.705568, "latitude": 40.416355, "width": 500, "height": 335, "upload_date": "22 January 2007", "owner_id": 113366, "owner_name": "Francis Chiu"}
,
{"photo_id": 526959, "photo_title": "DSC_0494", "longitude": -3.703423, "latitude": 40.417303, "width": 500, "height": 335, "upload_date": "22 January 2007", "owner_id": 113366, "owner_name": "Francis Chiu"}
,
{"photo_id": 460048, "photo_title": "Madrid - El Oso y el Madroño frente al Reloj de la Puerta del Sol", "longitude": -3.703701, "latitude": 40.417221, "width": 500, "height": 375, "upload_date": "16 January 2007", "owner_id": 17212, "owner_name": "javier herranz"}
,
{"photo_id": 454403, "photo_title": "El Oso y el Madroño en Navidad (2002)", "longitude": -3.704056, "latitude": 40.417066, "width": 500, "height": 375, "upload_date": "16 January 2007", "owner_id": 17212, "owner_name": "javier herranz"}
,
{"photo_id": 454363, "photo_title": "Puerta del Sol en Navidad (2002)", "longitude": -3.703594, "latitude": 40.416698, "width": 500, "height": 375, "upload_date": "16 January 2007", "owner_id": 17212, "owner_name": "javier herranz"}
,
{"photo_id": 388630, "photo_title": "Oso y puerta del sol", "longitude": -3.703567, "latitude": 40.417323, "width": 375, "height": 500, "upload_date": "11 January 2007", "owner_id": 9239, "owner_name": "Jasmon"}
,
{"photo_id": 325898, "photo_title": "IMG_0586", "longitude": -3.704388, "latitude": 40.415710, "width": 500, "height": 375, "upload_date": "07 January 2007", "owner_id": 69183, "owner_name": "Rober_Don"}
,
{"photo_id": 297856, "photo_title": "Er Tio Pepe", "longitude": -3.702822, "latitude": 40.417074, "width": 500, "height": 333, "upload_date": "04 January 2007", "owner_id": 64385, "owner_name": "Diableider"}
,
{"photo_id": 272208, "photo_title": "Monte de Piedad, Madrid", "longitude": -3.706153, "latitude": 40.417956, "width": 500, "height": 375, "upload_date": "31 December 2006", "owner_id": 47323, "owner_name": "fjuarez"}
,
{"photo_id": 272194, "photo_title": "Cortylandia en Navidad - Calle del Maestro Victoria, Madrid", "longitude": -3.705407, "latitude": 40.417899, "width": 500, "height": 375, "upload_date": "31 December 2006", "owner_id": 47323, "owner_name": "fjuarez"}
,
{"photo_id": 222633, "photo_title": "Oso y Madroño", "longitude": -3.703541, "latitude": 40.417213, "width": 500, "height": 375, "upload_date": "23 December 2006", "owner_id": 45068, "owner_name": "USFer"}]};

function fmapa001() {

var mapa001 = new GMap2(document.getElementById("mapa001"));

mapa001.addControl(new GSmallMapControl());

mapa001.setCenter(new GLatLng(40.416698,-3.70309), 17);

mapa001.setMapType(G_SATELLITE_MAP);

var icon = new GIcon();

icon.image = "http://www.panoramio.com/img/panoramio-marker.png";

icon.shadow = "http://www.panoramio.com/img/panoramio-shadow.png";

icon.iconSize = new GSize(18, 18);

icon.shadowSize = new GSize(22, 22);

icon.iconAnchor = new GPoint(9, 9);

icon.infoWindowAnchor = new GPoint(9, 0);

for (var i = 0; i < panoramio.photos.length; i++){

var point = new GLatLng(panoramio.photos[i].latitude,panoramio.photos[i].longitude);

var marker = new GMarker(point, icon);

marker.photo = panoramio.photos[i];

mapa001.addOverlay(marker,icon);
}

GEvent.addListener(mapa001, "click", function(overlay, point) {

if (!overlay || !overlay.photo)

return;

var p = overlay.photo;

// if photo_title is too long, cut it.

if (p.photo_title.length > 30) {

p.photo_title = p.photo_title.substring(0, 30) + "…";

}
overlay.openInfoWindowHtml(

"<div id='infowin'>" +

"<p><a href='http://www.panoramio.com/' target='_blank'><img src='http://www.panoramio.com/img/logo-small.gif' width='119px'" +

"height='25px' alt='Panoramio logo' /><\/a></p>" +

"<a id='photo_infowin' target='_blank' href='http://www.panoramio.com/photo/" + p.photo_id + "'>" +

"<img width='200' height='125' src='http://www.panoramio.com/photos/small/" + p.photo_id + ".jpg'/><\/a>" +

"<div style='overflow: hidden; width: 215px; height: 100px;'>" +

"<p><a target='_blank' class='photo_title' href='http://www.panoramio.com/photo/" + p.photo_id +

"'><H5><strong>" + p.photo_title + "<\/strong></H5><\/a></p>" +

"<H5><p>Posted by <a target='_blank' href='http://www.panoramio.com/user/" + p.owner_id + "'>" +

p.owner_name + "<\/a></p></H5><\/div>" +

"<\/div>");

});

}

</script>

El problema de introducir directamente todo este código en un post en blogger (o en otro blog o página) es que, además de ser un poco chapucero, resulta incómodo. Incómodo porque blogger interprete todos los saltos de línea y los traduce, de ahí que todo el código que aquí he pegado, en caso de probarlo, eliminad todos los saltos de línea. Y por otro lado, incómodo porque no veréis el código de forma global.
Por este motivo, una solución es cargar el código en una página externa (en un .js) y luego llamarlo desde aquí con un simple:


</div>

<script language="JavaScript" src="http://ruta_a_archivo/mapa001.js"> </script>

<div id="mapa001" style="width: 600px; height: 440px;"></div>


Finalmente, el resultado sería el siguiente:





Blogalaxia Tags:

Blogalaxia Tags:

Blogalaxia Tags:

Blogalaxia Tags:

8 comentarios:

Anónimo dijo...

Tomar una cucharada de:
Google Maps + Panoramio + YouTube + Flickr
y mezclar bien en una coctelera hasta su completa fusión. Servir frio:

MundiVideo

Buen provecho !!!

yooo dijo...

Muy bueno el artículo, me ayudó a agregarle fotos al mapa de mi ciudad:

http://proyecto83.com/mapanecochea/

Para generar el archivo JSON, si bien no se puede hacer una llamada externa para cargar los datos con GDownloadUrl(), si tenés un servidor PHP podés llamar a un archivo local para que cargue la URL de Panoramio, por ejemplo con ese script:

$url='http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&to=40&minx=-3.707371&miny=40.415132&maxx=-3.69912&maxy=40.419097';

$fp = @fopen($url, "rb");

if($fp){
while(!feof($fp))
{
$buffer = $buffer . fread($fp,1024);
}

}

if( $buffer)
echo $buffer;


Saludos!

kayak dijo...

Me alegro que te haya servido la información para tú proyecto, se le ve interesante.

Saludos yooo.

Javo dijo...

Gran artículo !!

Tambien se puede generar el mismo archivo JSON si se tiene PHP con el módulo CURL habilitado, de la siguiente manera:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=20&minx=-90&miny=18.5&maxx=-85.5&maxy=22&size=medium");
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
$curl_result= curl_exec ($ch);
curl_close ($ch);

Gracias por todo !!

Anónimo dijo...

Justo lo que andaba buscando, muchas gracias!!

tipler dijo...

Que tal ..!

muy buen artículo. Me ha sido de gran utilidad para empezar con GMaps.

Te hago una consulta: En el mapa del ejemplo se ven unos lindos iconos de Panoramico, que al hacer click te permiten ver las fotos del lugar que señalan.

Como se puede lograr el efecto de este link? La foto con el borde blanco + sombra, en lugar del icono.

http://www.guiarte.com/mapas-google/desarrolloweb/fotos-panoramio.php


Usar el new GLayer("com.panoramio.all") muestra fotos en exceso en el mapa. A mi gustaría poder mostrar sólo algunas que quiero. Por ejemplo, reemplazar los iconos del ejemplo por las fotos.

gracias x tu ayuda ..
tip

Edu dijo...

Buenas tipler,

me alegro que algo te haya servido.

El problema de la capa que ofrece google para visualizar las fotos de panoramio es que es algo limitada en opciones, de hecho, no sé si habrá otra opción que no sea "all".

Una forma de control más preciso es mediante jason, como indico en el post. Hace ya tiempo que lo escribí, y no recuerdo muy bien los detalles, pero creo recordar que al trabajar bajo "blogger", el servidor no hace petición remota de datos, y tenía que "descargar" los datos que me devolvía jason en la consulta a panoramio.

Puedes probar con esta solución, que se basa en lo mismo, pero que presenta directamente las fotos en vez de iconos. Con un poco de suerte tu servidor permite recogida de datos externos y puede servirte.
Aquí tienes el ejemplo, y tendrás que incluir este y este script.
Fijate en el primero, al final, donde se trabajan los parámetros de acercamiento, número de fotos, y orden (set=popularity). Parámetros que vienen eplicados en la api de panoramio.

Espero que pueda servirte.

Un saludo.

Anónimo dijo...

Puedes encontrar más información en este enlace, parece un código más sencillo http://www.gisandchips.org/2010/03/24/api-de-google-openstreetmap-y-otros-servicios-georreferenciados/