Google Maps API + PicasaウェブアルバムのKML
REDHANDSで出張モミほぐしの記録写真をPicasaウェブアルバムの機能で地図上にマッピングしました。すると自動的にKMLも出力されたので、このKMLの情報をGoogle Maps APIを使ってカスタマイズした地図上に表示させてみました。
Google Maps APIとKMLの使い方はこちらを参考にさせてもらいました。その部分のコードはほんとにシンプルなので簡単でしたが、HTMLやjavascirptのコーディングは不慣れなのでSignatureBoxの見た目を整えるところが一番苦労しました。でも地図と連携させるのはほんと楽しい。
以下コードです。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google Maps APIを使ってPicasaウェブアルバムの写真を地図上にマッピング</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAJKHF84pwt-IsS1rpJHqG9hTeaO0cQNVtPkJkqEbL54wF3_nMBhS4tuKZhMOvkFz24f80ONBOX8hVIQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function SignatureBox() {}
SignatureBox.prototype = new GControl();
SignatureBox.prototype.initialize = function(map)
{
var container = document.createElement("div");
container.style.font = "12px Arial";
container.style.color = "#0B333C";
container.style.backgroundColor = "white";
container.style.border = "1px solid #0B333C";
container.style.padding = "4px 4px 1px 4px";
container.style.width = "245px";
container.style.textAlign = "center";
container.innerHTML = 'Developed by<a href="http://uenon.jp/blog/"><img src="http://uenon.jp/icons/flefla_icon.gif" width="32" height="32" alt="FleFla" title="FleFla" border="0" style="margin:0px 10px 0px 4px;vertical-align:middle;" /></a>Sponsored by<a href="http://redhands.jp/"><img src="http://uenon.jp/icons/redhands_icon.gif" width="32" height="32" alt="REDHANDS" title="REDHANDS" border="0" style="margin:0px 0px 0px 4px;vertical-align:middle;" /></a>';
this.updateBackgroundAlpha(container.style, .8);
var owner = this;
GEvent.addDomListener(container, "mouseover",
function()
{
owner.updateBackgroundAlpha(container.style, 1);
});
GEvent.addDomListener(container, "mouseout",
function()
{
owner.updateBackgroundAlpha(container.style, .8);
});
map.getContainer().appendChild(container);
return container;
}
SignatureBox.prototype.updateBackgroundAlpha = function(style, alpha)
{
style.mozOpacity = alpha;
style.opacity = alpha;
style.filter = "alpha(opacity=" + String(alpha * 100) + ")";
}
SignatureBox.prototype.getDefaultPosition = function()
{
return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(70, 2));
}
function load()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new SignatureBox());
map.setCenter(new GLatLng(35.679052, 139.611511), 11);
var kml = "http://picasaweb.google.com/data/feed/base/user/redhands.jp/albumid/5159793698554063985?kind=photo&alt=kml&hl=ja";
map.setMapType(G_SATELLITE_MAP);
var geoxml = new GGeoXml(kml);
map.addOverlay(geoxml);
}
else
{
document.getElementById("map").innerHTML = "ご使用のブラウザはGoogle Mapsに対応していません。"
}
}
//]]>
</script>
<style>
body { margin: 0px; overflow:hidden }
#map { width: 100%; height:100% }
</style>
</head>
<body onload="load()" onunload="GUnload()" scroll="no">
<div id="map" ></div>
</body>
</html>
トラックバック(0)
このブログ記事を参照しているブログ一覧: Google Maps API + PicasaウェブアルバムのKML
このブログ記事に対するトラックバックURL: http://uenon.jp/mt/mt-tb.cgi/110
コメントする