takatama/README

## README
http://instagram.com/developer/embedding/
を参考にしてサムネイルを表示する。

## jsdoit.css
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; background-color: #DDDDDD;font: 20px sans-serif;}
#map_canvas { height: 90%; width: 100% }

## jsdoit.html
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- Google Maps API を読み込む。
        2点間の距離を計算するためlibraries=geometryを指定する-->
    <script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC18O37G6vf55boMFxdZfO2kb5gNaliIgA&sensor=false&libraries=geometry">
    </script>
</head>
<body onload="initialize()">
    <div style="font-size: 0.5em;">
        <fieldset style="float:right;">
            <legend>この文字を含むツイートだけ表示</legend>
            <input type="text" id="filter" value="http://" size="40">
            <input type="button" id="reload" value="再表示" onclick="reload();">
            <input type="button" id="clear" value="クリア" onclick="clearFilter();">
        </fieldset>
        <fieldset>
            <legend>地名を指定して移動</legend>
            <input type="text" id="address" value="新大阪駅" size="60">
            <input type="button" value="移動" onclick="codeAddress();">
        </fieldset>
    </div>
    <div id="map_canvas"></div>
</body>

## jsdoit.js
// forked from takatama's "ツイートを地図上に表示(コメント付) - Google Maps JavaScript API v3" http://jsdo.it/takatama/zNmW
var map, infoWindow, markersHash = {}, markersArray = [], geocoder;

//緯度経度、半径(km)、ツイートに含めたい文字を指定して、ツイートを取得する。
function fetchTweets(latLng, query, radiusKM) {
    var url = 'http://search.twitter.com/search.json?include_entities=true&callback=?';
    var data = {
        q: query,
        rpp: 100,
        geocode: latLng.lat() + ',' + latLng.lng() + ',' + radiusKM
    };
    $.getJSON(url, data, function (data, status) {
        if (status === 'success') {
            addTweetsAsMarkers(data);
        } else {
            alert('twiter error');
        }
    });
}
//マーカーとして未追加で、緯度経度を含むツイートのみ追加する。
function addTweetsAsMarkers(data) {
    var i;
    for (i = 0; i < data.results.length; i++) {
        var id = data.results[i].id_str;
        var geo = data.results[i].geo;
        if (!markersHash[id] && geo && geo.type === 'Point') {
            var marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(parseFloat(geo.coordinates[0]), parseFloat(geo.coordinates[1])),
                title: '@' + data.results[i].from_user,
                icon: data.results[i].profile_image_url,
                result: data.results[i] //情報ウィンドウにツイートを表示するために使う
            });
            google.maps.event.addListener(marker, 'click', function() {
                //クリックされたmarkerはthisで参照できる。
                showInfoWindow(this);
            });
            markersHash[id] = marker;
            markersArray.push(marker);
        }
    }
}
//情報ウィンドウを表示する
function showInfoWindow(marker) {
    marker.setZIndex(9999); //表示位置を一番上にする
    var linkToTheTweet = '<a target="_blank" href="http://twitter.com/' + marker.result.from_userb
        + '/status/' + marker.result.id_str + '"> 開く </a></p>';
    //ツイート内のリンクをクリック可能にする。
    var text = marker.result.text.replace(/(https?:\/\/[\x21-\x7e]+)/gi, function () {
         var uri = arguments[1];
         return '<a target="_blank" href="' + uri + '">' + decodeURI(uri) + '</a>';
     });
    var image = '';
    if (marker.result.entities.urls) {
        var expanded_url = marker.result.entities.urls[0].expanded_url;
        if (expanded_url && expanded_url.indexOf('http://instagr') == 0) {
            image = '<img align="left" style="padding: 0px 8px 8px 0px;" src="' + expanded_url + 'media/?size=t" width="150" height="150">';
        }
    }
    infoWindow.content = '<p style="font-size:0.9em; float:left;">' + image + text + '<div style="font-size:0.7em;">'
         + linkToTheTweet + '</div></p>';
     infoWindow.open(map, marker);
}
//検索する範囲を表示画面の大きさから計算して、ツイートを取得する。
function fetchTweetsWithRadius() {
    var distanceKM = 3.0;
    var bounds = map.getBounds();
    if(bounds) {
        var latlng = new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng());
        var distanceM = google.maps.geometry.spherical.computeDistanceBetween(bounds.getNorthEast(), latlng);
        distanceKM = Math.floor(distanceM / 2 / 100) / 10;
    }
    fetchTweets(map.getCenter(), $('#filter').val(), distanceKM + 'km');
}
//ページが読み込み終わったら実行する。
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(35.698619, 139.773288),
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    infoWindow = new google.maps.InfoWindow();
    //地図内をクリックしたら情報ウィンドウを閉じる
    google.maps.event.addListener(map, 'click', function () {
        infoWindow.close();
    });
    //ドラッグが終わった位置で、ツイートを検索する。
    google.maps.event.addListener(map, 'dragend', function () {
         fetchTweetsWithRadius();
    });
    //ダブルクリックしズームした位置で、ツイートを検索する。
    google.maps.event.addListener(map, 'dblclick', function () {
         fetchTweetsWithRadius();
    });
    fetchTweetsWithRadius();
    setInterval(fetchTweetsWithRadius, 30000); //30秒ごとにツイートを検索する。
    setInterval(showNextTweet, 4000); //4秒ごとに情報ウィンドウを表示する。
    geocoder = new google.maps.Geocoder();
}

//追加したマーカーが画面上にあれば情報ウィンドウを表示する。
var currentMarker = null;
function showNextTweet() {
    if (currentMarker) {
        currentMarker.setMap(null);
        infoWindow.close();
        currentMarker = null;
    }
    var marker = markersArray.shift();
    while (marker) {
        var bounds = map.getBounds();
        //はじめに表示したときには、boundsがundefinedになってしまう。
        if (!bounds || bounds.contains(marker.getPosition())) {
            map.panTo(marker.getPosition());
            showInfoWindow(marker);
            currentMarker = marker;
            return;
        } else {
            marker.setMap(null);
            marker = markersArray.shift();
        }
    }
}
//地名から緯度経度を取得して、地図を移動させ、ツイートを検索する。
function codeAddress() {
    geocoder.geocode({
        'address': $('#address').val()
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            fetchTweetsWithRadius();
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });
}
//すべてのマーカーを削除してツイートを検索する。
function reload() {
    var i;
    for (i = 0; i < markersArray.length; i++) {
        markersArray[i].setMap(null);
    }
    markersArray.length = 0;
    markersHash = {};
    fetchTweetsWithRadius();
}
//ツイートをフィルターする文字列をクリアし、ツイートを検索する。
function clearFilter() {
    $('#filter').val('');
        reload();
        }
	http://instagram.com/developer/embedding/
	を参考にしてサムネイルを表示する。
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0; background-color: #DDDDDD;font: 20px sans-serif;}
	#map_canvas { height: 90%; width: 100% }
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<!-- Google Maps API を読み込む。
	2点間の距離を計算するためlibraries=geometryを指定する-->
	<script type="text/javascript"
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC18O37G6vf55boMFxdZfO2kb5gNaliIgA&sensor=false&libraries=geometry">
	</script>
	</head>
	<body onload="initialize()">
	<div style="font-size: 0.5em;">
	<fieldset style="float:right;">
	<legend>この文字を含むツイートだけ表示</legend>
	<input type="text" id="filter" value="http://" size="40">
	<input type="button" id="reload" value="再表示" onclick="reload();">
	<input type="button" id="clear" value="クリア" onclick="clearFilter();">
	</fieldset>
	<fieldset>
	<legend>地名を指定して移動</legend>
	<input type="text" id="address" value="新大阪駅" size="60">
	<input type="button" value="移動" onclick="codeAddress();">
	</fieldset>
	</div>
	<div id="map_canvas"></div>
	</body>
	// forked from takatama's "ツイートを地図上に表示(コメント付) - Google Maps JavaScript API v3" http://jsdo.it/takatama/zNmW
	var map, infoWindow, markersHash = {}, markersArray = [], geocoder;

	//緯度経度、半径(km)、ツイートに含めたい文字を指定して、ツイートを取得する。
	function fetchTweets(latLng, query, radiusKM) {
	var url = 'http://search.twitter.com/search.json?include_entities=true&callback=?';
	var data = {
	q: query,
	rpp: 100,
	geocode: latLng.lat() + ',' + latLng.lng() + ',' + radiusKM
	};
	$.getJSON(url, data, function (data, status) {
	if (status === 'success') {
	addTweetsAsMarkers(data);
	} else {
	alert('twiter error');
	}
	});
	}
	//マーカーとして未追加で、緯度経度を含むツイートのみ追加する。
	function addTweetsAsMarkers(data) {
	var i;
	for (i = 0; i < data.results.length; i++) {
	var id = data.results[i].id_str;
	var geo = data.results[i].geo;
	if (!markersHash[id] && geo && geo.type === 'Point') {
	var marker = new google.maps.Marker({
	map: map,
	position: new google.maps.LatLng(parseFloat(geo.coordinates[0]), parseFloat(geo.coordinates[1])),
	title: '@' + data.results[i].from_user,
	icon: data.results[i].profile_image_url,
	result: data.results[i] //情報ウィンドウにツイートを表示するために使う
	});
	google.maps.event.addListener(marker, 'click', function() {
	//クリックされたmarkerはthisで参照できる。
	showInfoWindow(this);
	});
	markersHash[id] = marker;
	markersArray.push(marker);
	}
	}
	}
	//情報ウィンドウを表示する
	function showInfoWindow(marker) {
	marker.setZIndex(9999); //表示位置を一番上にする
	var linkToTheTweet = '<a target="_blank" href="http://twitter.com/' + marker.result.from_userb
	+ '/status/' + marker.result.id_str + '"> 開く </a></p>';
	//ツイート内のリンクをクリック可能にする。
	var text = marker.result.text.replace(/(https?:\/\/[\x21-\x7e]+)/gi, function () {
	var uri = arguments[1];
	return '<a target="_blank" href="' + uri + '">' + decodeURI(uri) + '</a>';
	});
	var image = '';
	if (marker.result.entities.urls) {
	var expanded_url = marker.result.entities.urls[0].expanded_url;
	if (expanded_url && expanded_url.indexOf('http://instagr') == 0) {
	image = '<img align="left" style="padding: 0px 8px 8px 0px;" src="' + expanded_url + 'media/?size=t" width="150" height="150">';
	}
	}
	infoWindow.content = '<p style="font-size:0.9em; float:left;">' + image + text + '<div style="font-size:0.7em;">'
	+ linkToTheTweet + '</div></p>';
	infoWindow.open(map, marker);
	}
	//検索する範囲を表示画面の大きさから計算して、ツイートを取得する。
	function fetchTweetsWithRadius() {
	var distanceKM = 3.0;
	var bounds = map.getBounds();
	if(bounds) {
	var latlng = new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng());
	var distanceM = google.maps.geometry.spherical.computeDistanceBetween(bounds.getNorthEast(), latlng);
	distanceKM = Math.floor(distanceM / 2 / 100) / 10;
	}
	fetchTweets(map.getCenter(), $('#filter').val(), distanceKM + 'km');
	}
	//ページが読み込み終わったら実行する。
	function initialize() {
	var mapOptions = {
	center: new google.maps.LatLng(35.698619, 139.773288),
	zoom: 11,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	infoWindow = new google.maps.InfoWindow();
	//地図内をクリックしたら情報ウィンドウを閉じる
	google.maps.event.addListener(map, 'click', function () {
	infoWindow.close();
	});
	//ドラッグが終わった位置で、ツイートを検索する。
	google.maps.event.addListener(map, 'dragend', function () {
	fetchTweetsWithRadius();
	});
	//ダブルクリックしズームした位置で、ツイートを検索する。
	google.maps.event.addListener(map, 'dblclick', function () {
	fetchTweetsWithRadius();
	});
	fetchTweetsWithRadius();
	setInterval(fetchTweetsWithRadius, 30000); //30秒ごとにツイートを検索する。
	setInterval(showNextTweet, 4000); //4秒ごとに情報ウィンドウを表示する。
	geocoder = new google.maps.Geocoder();
	}

	//追加したマーカーが画面上にあれば情報ウィンドウを表示する。
	var currentMarker = null;
	function showNextTweet() {
	if (currentMarker) {
	currentMarker.setMap(null);
	infoWindow.close();
	currentMarker = null;
	}
	var marker = markersArray.shift();
	while (marker) {
	var bounds = map.getBounds();
	//はじめに表示したときには、boundsがundefinedになってしまう。
	if (!bounds \|\| bounds.contains(marker.getPosition())) {
	map.panTo(marker.getPosition());
	showInfoWindow(marker);
	currentMarker = marker;
	return;
	} else {
	marker.setMap(null);
	marker = markersArray.shift();
	}
	}
	}
	//地名から緯度経度を取得して、地図を移動させ、ツイートを検索する。
	function codeAddress() {
	geocoder.geocode({
	'address': $('#address').val()
	}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
	map.setCenter(results[0].geometry.location);
	fetchTweetsWithRadius();
	} else {
	alert("Geocode was not successful for the following reason: " + status);
	}
	});
	}
	//すべてのマーカーを削除してツイートを検索する。
	function reload() {
	var i;
	for (i = 0; i < markersArray.length; i++) {
	markersArray[i].setMap(null);
	}
	markersArray.length = 0;
	markersHash = {};
	fetchTweetsWithRadius();
	}
	//ツイートをフィルターする文字列をクリアし、ツイートを検索する。
	function clearFilter() {
	$('#filter').val('');
	reload();
	}