just a couple of tweaks...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sports Tweets Global</title>
<link href="http://tympanus.net/Tutorials/InteractiveGoogleMapTwitter/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="inp">
<input value="show user" type="button" onclick="obj.twitter.show()"/>
<div id="map"></div>
<div class="twitter">
<div class="inside"></div>
</div>
</body>
<!-- JavaScript Ref -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://tympanus.net/codrops/adpacks/csscustom.js"></script>
<script type="text/javascript">
var map, geocoder, marker, ey, my, gmarkers=[], count=0, mouseDown = false;
var iW= new google.maps.InfoWindow();
var obj = {
init: function(){
this.map.init();
this.twitter.click();
this.scroll.init();
},
twitter:{
show: function(){
var arr=[];
var user=$('#inp').val();
$.getJSON('http://twitter.com/users/show/'+user+'.json?callback=?', function(data){
var img = data.profile_image_url,
screen_name = data.screen_name;
geocoder.geocode({address: data.location}, function(response, status){
if (status == google.maps.GeocoderStatus.OK){
var x = response[0].geometry.location.lat(),
y = response[0].geometry.location.lng();
marker = new google.maps.Marker({
icon:img,
map: map,
title: screen_name,
position: new google.maps.LatLng(x,y)
});
count=gmarkers.length;
gmarkers.push(marker);
map.setCenter(marker.getPosition())
arr.push('<div class="item">');
arr.push('<p class="img"><a href="#" class="open" rel="'+screen_name+'"><img src="'+img+'" alt="" /></a></p>');
arr.push('<div class="entry">');
arr.push('<a href="#" class="open title" count="'+count+'" rel="'+screen_name+'">'+data.name+'</a>');
arr.push('<p class="description">'+data.description+'</p>');
arr.push('<p class="url"><a href="'+data.url+'" target="_blank">'+data.url+'</a></p>');
arr.push('<p class="count">Followers: '+data.followers_count+', Following: '+data.friends_count+'</p>');
arr.push('</div>');
arr.push('</div>');
var html = arr.join('');
arr = [];
$('.twitter').find('.inside').append(html);
obj.twitter.addList(count)
}
});
});
},
addList: function(num){
google.maps.event.addListener(gmarkers[num], 'click', function(){
obj.twitter.open(map,gmarkers[num]);
});
},
click: function(){
$('.twitter').find('.open').live('click', function(){
var t = $(this), cnt = t.attr('count');
obj.twitter.open(map,gmarkers[cnt]);
});
},
open: function(map,marker){
var posts = $('.posts'), arr = new Array;
var user=$('#inp').val();
$.getJSON('http://twitter.com/status/user_timeline/'+user+'.json?count=5&callback=?', function(data){
$.each(data, function(i, post){
arr.push('<div class="post">');
arr.push(post.text);
arr.push('</div>');
});
html = arr.join('');
iW.setContent(html);
iW.open(map, marker);
});
}
},
map:{
size:function(){
var w = $(window).width(),
h = $(window).height();
return {width: w, height: h}
},
data:{
zoom: 3,
center: new google.maps.LatLng(41.81,72.26),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
init: function(){
var size = obj.map.size();
$('#map').css({width: size.width, height: size.height*.95});
map = new google.maps.Map(document.getElementById('map'),obj.map.data),
geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'dragstart', function(){
$('.posts').hide();
});
}
},
scroll: {
mouse: function(e){
var y = e.pageY;
return y;
},
check: function(y){
var all = $('.twitter').height(),
inside = $('.twitter').find('.inside').height();
if (y < (all - inside)) {
y = all - inside;
}else if (y > 0){
y = 0;
}
return y;
},
update: function(e){
var y = obj.scroll.mouse(e),
movey = y-my,
top = ey+movey;
check = obj.scroll.check(top);
$('.twitter').find('.inside').css({top: check+'px'});
},
init: function(){
$('.twitter').find('.inside').bind({
mousedown: function(e){
e.preventDefault();
mouseDown = true;
var mouse = obj.scroll.mouse(e);
my = mouse;
var element = $(this).position();
ey = element.top;
obj.scroll.update(e);
},
mousemove: function(e){
if(mouseDown)
obj.scroll.update(e);
return false;
},
mouseup: function(){
if(mouseDown)
mouseDown = false;
return false;
},
mouseleave: function(){
if(mouseDown)
mouseDown = false;
return false;
}
});
}
}
}
$(function(){obj.init();
});
</script>
</html>