Google AJAX Feed APIでPicasa Webの写真をGoogleマップにスライドショーで表示してみた。
予めPicasa Webにアップロードした写真にジオタグ(位置情報)を付けておくと地図上に表示できるようになる。
参考サイト： http://www.touraineverte.com/
DEMO： Picasa Webの写真をGoogleマップにスライドショーで表示
サンプルソース
<!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" xml:lang="ja">
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Picasa- Google Maps「Google AJAX Feed API」</title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ここにキー"></script>
<script type="text/javascript" src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"></script>
<script type="text/javascript">
google.load("maps", "2");
google.load("feeds", "1");
var maCarte;
var miniIconeVert;
var fluxRSS = "ここにPicasaのRSS";
function initialize() {
miniIconeVert = new google.maps.Icon();
miniIconeVert.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
miniIconeVert.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
miniIconeVert.iconSize = new google.maps.Size(12, 20);
miniIconeVert.shadowSize = new google.maps.Size(22, 20);
miniIconeVert.iconAnchor = new google.maps.Point(6, 20);
miniIconeVert.infoWindowAnchor = new google.maps.Point(5, 1);
maCarte = new google.maps.Map2(document.getElementById("picasamap"));
maCarte.setCenter(new google.maps.LatLng(35.601765,139.52877), 10);
maCarte.addControl(new GLargeMapControl());
maCarte.addControl(new GLargeMapControl());
maCarte.addControl(new GMapTypeControl());
var point = new google.maps.LatLng(35.578531,139.448025);
var marqueur = new google.maps.Marker(point,miniIconeVert);
maCarte.addOverlay(marqueur);
var infos = '<div id="box"><div id="slideshow" class="inside">Picasa Web</div></div>';
google.maps.Event.addListener(marqueur, "click", function() {
marqueur.openInfoWindowHtml(infos);
setTimeout("fonduEnchaine();",3000);
});
}
function fonduEnchaine(){
new GFslideShow(fluxRSS, 'slideshow', {displayTime: 2000,transistionTime: 800})
}
google.setOnLoadCallback(initialize);
</script>
<style type='text/css'>
#box {
background-color:#ccc;
border:1px solid #ccc;
width:288px;
height:216px;
margin:0;
padding:0;
z-index:1;
}
.inside a img {border : none;}
.inside {
width: 288px;
height: 216px;
border: 1px solid #000;
background-color:#000;
margin:-3px 3px 3px -3px;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div id="picasamap" style="width:540px; height:380px; border: 1px solid black;"></div>
<noscript>
<p>Google Maps</p>
</noscript>
</body>
</html>