A Microsoft lançou uma das suas maiores promessas tecnológicas, o Photosynth. Claro, é mais um daqueles casos de tecnologia criada por uma startup obscura e posteriormente comprada por um big player, mas ninguém irá lembrar disso quando vir o que ele produz.

A idéia do Photosynth é analisar centenas (milhares?) de fotos de alguma coisa ou lugar e linká-las entre si, através das texturas e elementos da foto. Mais ou menos como o Photoshop faz ao montar um panorama com várias fotos.  No entanto, no Photosynth a imagem é dinâmica, você pode clicar nela para mostrar em volta ou aproximar algum detalhe (obviamente se houver foto de um detalhe).

O grosso do processamento do Photosynth é feito nos servidores da Microsoft. Ou, usando o termo da moda, computação na "nuvem". Para visualizar um "synth", você precisa descarregar um player no site. Com esse mesmo player você pode criar seus próprios synths e hospedar na Microsoft ( ela disponibiliza 20 Giga de espaço). Apenas reze para que o servidor não esteja sobrecarregado como aconteceu hoje!

Talvez o fato de exigir um player específico e que roda apenas no Windows seja o maior senão dele, mas com o tempo isso se resolve (ou as pessoas se acostumam).

Se você quiser ver como ele funciona antes de instalá-lo, rode o vídeo abaixo:

Bom, agora vamos para o lado geek!

Chris Pendleton, "evangelista" do Virtual Earth, fez um post sobre o lançamento do Photosynth e como integrar um synth com o Virtual Earth. 
Não sou um grande fã do Virtual Earth. Prefiro o Google Maps, pois os mapas dele são mais completos aqui no Brasil e em outros lugares. No entanto, a tecnologia do Virtual Earth me parece superior, então vamos torcer para que a coleção de mapas dele aumente rapidamente!

Resolvi fazer algo semelhante ao que Chris mostrou, mas usando o Google Maps!

Não é necessário nada especial, apenas uma página HTML e javascript.

Usar a API do Google Maps é muito fácil e não entrarei em detalhes agora. Apenas irei ressaltar alguns trechos do código:

      function load() {

            doLoad();

            mArray.push('27.175381063200927;78.041188716888428;Tahj Mahal;
66fc546a-5f21-4daf-9cee-240711304016');

            mArray.push('47.6020541820715;-122.33196973800662;Smith Tower;
214c93ee-509e-4222-8025-a722726f8be5');

            mArray.push('45.433816178359734;12.339363098144521;San Marco;
d7d78324-ad5e-41ea-94dd-512580ed4393');

            mArray.push('83.608821795290325;-32.4755859375;Halo3;
820f7ee5-2657-483b-8f57-16ca5079eb87');

            mArray.push('45.431399389840422;12.333505153656015;Grande Canal;
ffa4cce7-d8ec-44f8-9eac-ab28b838cdcb');

            mArray.push('51.03632074136511;6.6280174255370934;Kraftwerksbaustelle Grevenbroich;

e016e636-4804-4849-92a6-5b0a90782687');

            addMarkers();

        }

Essa função cria uma array com as coordenadas de alguns synths disponíveis no site. Cada synth possui um identificador único, e usarei esse ID para passar como parâmetro.

        function addMarkers() {

            if (mArray.length) {

                var bounds = new GLatLngBounds();

                for (n = 0; n < mArray.length; n++) {

                    var mData = mArray[n].split(';');

                    var point = new GLatLng(mData[0], mData[1]);

                    bounds.extend(point);

                    var marker = createMarker(point, mData[2], mData[3]);

                    map.addOverlay(marker);

                }

                map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

            }

        }

Essa função varre a array e cria um marcador (marker) para cada synth que informei na mArray.

        function createMarker(point, title, erbId) {

            var blueIcon = new GIcon(baseIcon);

            blueIcon.image = "syntlogo.png";

            // Set up our GMarkerOptions object

            markerOptions = { icon: blueIcon };

            var marker = new GMarker(point, { title: title,icon:blueIcon });

            GEvent.addListener(marker, "click", function() {

            marker.openInfoWindowHtml('<div style="width:400px;font-family:Verdana; 

font-size: small;">' + title + '<iframe frameborder=0 src=\'http://photosynth.net/embed.aspx?cid=' 

+ erbId + '\' width=\'400\' height=\'300\'></iframe></div>');

            });

            return marker;

        } 

CreateMarker efetivamente cria cada ponto. Criei uma imagem a partir do logo do Photosynth para usar como marcador.

O pulo do gato está no método marker.openInfoWindowHtml. Esse método irá criar um popup quando você clicar em um marcador. Como parâmetro para esse método você pode passar um html qualquer. Nós passaremos um iframe que chama o player embedded do photosynth. Como parâmetro, enviamos o ID do synth.

Veja aqui o exemplo rodando. Clique em um dos marcadores para ser exibido o synth respectivo. O player embedded possui uma característica: para as imagens serem exibidas você precisa passar o mouse por cima do player, ao menos uma vez. Não sei se é esperado isso ou é algum bug.

No link abaixo você pode descarregar o exemplo completo:

Para usar o exemplo, você deve criar uma API Key no site http://code.google.com/apis/maps/signup.html

De posse da nova chave, coloque-a no topo do html, logo após o código: <script src="http://maps.google.com/maps?file=api&v=2&key=