「15a24/ジオタグ地図」の編集履歴（バックアップ）一覧はこちら

「15a24/ジオタグ地図」(2009/12/30 (水) 08:07:39) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#javascript(){{
<meta name="viewport" content="device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAYcnMuEZ9aVvC2_asbHKXuRRnaTBbG-tmmWKb-1Nfcxygo7GqNhQvW8gRUfZFDuDXbWYHCA8N3keWWw&hl=ja"></script>
<script type="text/javascript" src="http://www21.atwiki.jp/15x24/?cmd=upload&act=open&page=15a24%2F%E3%82%B8%E3%82%AA%E3%82%BF%E3%82%B0%E5%9C%B0%E5%9B%B3&file=twitterapi.js"></script>
<script type="text/javascript">
function callbackSearchGeoToMap(res)
{
    var str = '';

    var baseIcon = new GIcon();
    baseIcon.iconSize = new GSize(16, 16);
    baseIcon.iconAnchor = new GPoint(8, 8);
    baseIcon.infoWindowAnchor = new GPoint(8, 2);

    function createMarker(point, infoText, profileImageURL) {
        var profileIcon = new GIcon(baseIcon);
        profileIcon.image = profileImageURL;
        var markerOptions = {
            icon: profileIcon
        };
        var marker = new GMarker(point, markerOptions);
        GEvent.addListener(marker, "click", function() {
                    marker.openInfoWindowHtml(infoText);
                });
        return marker;
    }

    function getDateTime(str) {
        var date = new Date(str);
        if (date == null) { return str; }
        return date.toLocaleString();
    }

    function getInfoText(obj) {
        var dateTime = getDateTime(obj.created_at);
        return '<img src="' + obj.profile_image_url + '" width=16 height=16 alt="icon" />'
             + obj.from_user + ':'
             + obj.text
             + ', geo:' + obj.geo.coordinates
             + ' (' + dateTime + ')';
    }

    function getMarkerText(obj) {
        var dateTime = getDateTime(obj.created_at);
        return '<img src="' + obj.profile_image_url + '" width=32 height=32 alt="icon" style="vertical-align: text-bottom" />'
             + '&nbsp;' + obj.from_user + '<br />'
             + '<div style="clear: both">' + obj.text + '</div>'
             + '<div style="text-align: right">(' + dateTime + ')</div>';
    }

    for (var i = 0; i < res.results.length; i++) {
        var obj = res.results[i];
        if (obj.geo != null) {
            var infoText = getInfoText(obj);
            str += infoText + '<br />';

            var lat = obj.geo.coordinates[0];
            var lng = obj.geo.coordinates[1];
            var point = new GLatLng(lat, lng);
            var markerText = getMarkerText(obj);
            var profileImageURL = obj.profile_image_url;
            var marker = createMarker(point, markerText, profileImageURL);
            map.addOverlay(marker);
        }
    }
    document.getElementById('info_text').innerHTML = str;
}
function searchGeoToMap() {
    map.clearOverlays()
    var q = document.getElementById('q').value;
    var param = 'q=' + escape(q) + "&rpp=100&geocode=35.69%2C139.70%2C100km";
    TwitterAPI.search(callbackSearchGeoToMap, '', param);
}

var map;
var geocoder;

function firstSearch() {
    initialize();
    searchGeoToMap();
}

function initialize() {
    if (GBrowserIsCompatible()) {
        document.getElementById('r_side').style["display"] = "none";
        document.getElementById('header').style["display"] = "none";

	if(navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPod") != -1){
		ua="iphone";

document.getElementById('headBarWrapper').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["clear"] = "both";
document.getElementById('wrapper').style["width"] = "320px";
document.getElementById('content').style["width"] = "320px";
document.getElementById('map_canvas').style["width"]  = "300px";
document.getElementById('map_canvas').style["height"] = "300px";
document.getElementById('info_text').style["width"]  = "300px";
document.getElementById('info_text').style["height"]  = "100px";

	}else{

document.getElementById('wrapper').style["width"] = (window.innerWidth - 20) + "px";
document.getElementById('map_canvas').style["width"]  = (window.innerWidth - 100) + "px";
document.getElementById('map_canvas').style["height"] = (window.innerHeight - 300) + "px";
document.getElementById('info_text').style["width"]  = (window.innerWidth - 100) + "px";

	}


        var point = new GLatLng(35.69, 139.70);
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(point, 13);
        map.setZoom(12)

        map.addControl(new GLargeMapControl());
        geocoder = new GClientGeocoder()
    }
}

window.onunload = GUnload;
window.onload =   firstSearch;

</script>

<div id="map_canvas" style="width: 800px; height: 800px"></div>
<form onsubmit="searchGeoToMap(); return false;">
<input type="text" id="q" value="#15a24" />
<input type="submit" value="twitter 検索→ジオタグ表示" />
</form>
<div id="info_text" style="height: 200px; width: 800px; overflow: scroll; background: #f8ffff;"></div>
}}
* ジオタグ地図

twitter を検索して、最新100件のジオタグの位置を表示します。

注：
- 都心から半径100km以内のジオタグのみ反応します。
- twitter API の仕様により、1時間に100回程度しか検索できません。

謝辞：
http://m-ono.info/tech/geotag-viewer/ をたいへん参考にさせていただきつつ、 http://www.otchy.net/javascript/twitter-api/ を利用して作成しました。





----

#javascript(){{
<meta name="viewport" content="device-width,initial-scale=1,user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAYcnMuEZ9aVvC2_asbHKXuRRnaTBbG-tmmWKb-1Nfcxygo7GqNhQvW8gRUfZFDuDXbWYHCA8N3keWWw&hl=ja"></script>
<script type="text/javascript" src="http://www21.atwiki.jp/15x24/?cmd=upload&act=open&page=15a24%2F%E3%82%B8%E3%82%AA%E3%82%BF%E3%82%B0%E5%9C%B0%E5%9B%B3&file=twitterapi.js"></script>
<script type="text/javascript">
function callbackSearchGeoToMap(res)
{
    var str = '';

    var baseIcon = new GIcon();
    baseIcon.iconSize = new GSize(16, 16);
    baseIcon.iconAnchor = new GPoint(8, 8);
    baseIcon.infoWindowAnchor = new GPoint(8, 2);

    function createMarker(point, infoText, profileImageURL) {
        var profileIcon = new GIcon(baseIcon);
        profileIcon.image = profileImageURL;
        var markerOptions = {
            icon: profileIcon
        };
        var marker = new GMarker(point, markerOptions);
        GEvent.addListener(marker, "click", function() {
                    marker.openInfoWindowHtml(infoText);
                });
        return marker;
    }

    function getDateTime(str) {
        var date = new Date(str);
        if (date == null) { return str; }
        return date.toLocaleString();
    }

    function getInfoText(obj) {
        var dateTime = getDateTime(obj.created_at);
        return '<img src="' + obj.profile_image_url + '" width=16 height=16 alt="icon" />'
             + obj.from_user + ':'
             + obj.text
             + ', geo:' + obj.geo.coordinates
             + ' (' + dateTime + ')';
    }

    function getMarkerText(obj) {
        var dateTime = getDateTime(obj.created_at);
        return '<img src="' + obj.profile_image_url + '" width=32 height=32 alt="icon" style="vertical-align: text-bottom" />'
             + '&nbsp;' + obj.from_user + '<br />'
             + '<div style="clear: both">' + obj.text + '</div>'
             + '<div style="text-align: right">(' + dateTime + ')</div>';
    }

    for (var i = 0; i < res.results.length; i++) {
        var obj = res.results[i];
        if (obj.geo != null) {
            var infoText = getInfoText(obj);
            str += infoText + '<br />';

            var lat = obj.geo.coordinates[0];
            var lng = obj.geo.coordinates[1];
            var point = new GLatLng(lat, lng);
            var markerText = getMarkerText(obj);
            var profileImageURL = obj.profile_image_url;
            var marker = createMarker(point, markerText, profileImageURL);
            map.addOverlay(marker);
        }
    }
    document.getElementById('info_text').innerHTML = str;
}
function searchGeoToMap() {
    map.clearOverlays()
    var q = document.getElementById('q').value;
    var param = 'q=' + escape(q) + "&rpp=100&geocode=35.69%2C139.70%2C100km";
    TwitterAPI.search(callbackSearchGeoToMap, '', param);
}

var map;
var geocoder;

function firstSearch() {
    initialize();
    searchGeoToMap();
}

function initialize() {
    if (GBrowserIsCompatible()) {
        document.getElementById('r_side').style["display"] = "none";
        document.getElementById('header').style["display"] = "none";

	if(navigator.userAgent.indexOf("iPhone") != -1 || navigator.userAgent.indexOf("iPod") != -1){
		ua="iphone";

document.getElementById('headBarWrapper').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["width"] = "320px";
document.getElementById('atwiki-jp-bg1').style["clear"] = "both";
document.getElementById('wrapper').style["width"] = "320px";
document.getElementById('content').style["width"] = "320px";
document.getElementById('map_canvas').style["width"]  = "300px";
document.getElementById('map_canvas').style["height"] = "300px";
document.getElementById('info_text').style["width"]  = "300px";
document.getElementById('info_text').style["height"]  = "100px";

	}else{

document.getElementById('wrapper').style["width"] = (window.innerWidth - 20) + "px";
document.getElementById('map_canvas').style["width"]  = (window.innerWidth - 100) + "px";
document.getElementById('map_canvas').style["height"] = (window.innerHeight - 300) + "px";
document.getElementById('info_text').style["width"]  = (window.innerWidth - 100) + "px";

	}


        var point = new GLatLng(35.69, 139.70);
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(point, 13);
        map.setZoom(12)

        map.addControl(new GLargeMapControl());
        geocoder = new GClientGeocoder()
    }
}

window.onunload = GUnload;
window.onload =   firstSearch;

</script>

<div id="map_canvas" style="width: 800px; height: 800px"></div>
<form onsubmit="searchGeoToMap(); return false;">
<input type="text" id="q" value="#15a24" />
<input type="submit" value="twitter 検索→ジオタグ表示" />
</form>
<div id="info_text" style="height: 200px; width: 800px; overflow: auto; background: #f8ffff;"></div>
}}
* ジオタグ地図

twitter を検索して、最新100件のジオタグの位置を表示します。

注：
- 都心から半径100km以内のジオタグのみ反応します。
- twitter API の仕様により、1時間に100回程度しか検索できません。

謝辞：
http://m-ono.info/tech/geotag-viewer/ をたいへん参考にさせていただきつつ、 http://www.otchy.net/javascript/twitter-api/ を利用して作成しました。





----