Google マップ にPicasaの写真をスライドショーで表示「Google AJAX Feed API」


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>

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*