Year 12s: what will be the first way you research your future options? >>

geocoding teets

Hi i am trying to geocode tweets to a google map i have all my code in place but it just isnt loading up my tweets its just showing the map here is my html code can anyone tell me where i am going wrong thanks

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Interactive Google Map using the Twitter API</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<div class="twitter">
<div class="inside"></div>
</div>
<div class="posts"></div>
<div class="get">
<input type="hidden" value="MiddlesexUni" />
<input type="hidden" value="Jag157" />
<input type="hidden" value="iBainsy" />
<input type="hidden" value="twi" />
<input type="hidden" value="dillang" />
<input type="hidden" value="guvvibains" />
<input type="hidden" value="GurpsKandola" />
<input type="hidden" value="Arjunnnn" />
</div>
</body>
</html>

Reply 1

Planto

All you've given us here is some static HTML... where's the code that provides the actual functionality you're describing?

Reply 2

jag157

Original post by Planto

All you've given us here is some static HTML... where's the code that provides the actual functionality you're describing?

sorry the javascript code i have is here i am following a tutorial

http://tympanus.net/codrops/2011/04/13/interactive-google-map/comment-page-1/#comments

but it doesnt seem to work

var map, geocoder, marker,
ey, my, mouseDown = false;
var o = {
init: function(){
this.map.init();
this.twitter.show();
this.twitter.click();
this.scroll.init();
},
twitter: {
get: function(){
var arr = new Array;
$('.get').find('input').each(function(i){
var t = $(this),
val = t.val();
arr = val;
});
return arr;
},
show: function(){
var users = o.twitter.get(), arr = new Array;
for (i in users){
var user = users;
$.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)
});
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" 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);
google.maps.event.addListener(marker, 'click', function(){
o.twitter.open(this.title);
});
}
});
});
}
},
click: function(){
$('.twitter').find('.open').live('click', function(){
var t = $(this), rel = t.attr('rel');
o.twitter.open(rel);
});
},
open: function(user){
var posts = $('.posts'), arr = new Array;
$.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>');
});
var html = arr.join('');
posts.html(html).fadeIn();
});
}
},
map: {
size: function(){
var w = $(window).width(),
h = $(window).height();
return { width: w, height: h }
},
data: {
zoom: 3,
center: new google.maps.LatLng(52, 23),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
init: function(){
var size = o.map.size();
$('#map').css({ width: size.width, height: size.height });
map = new google.maps.Map(document.getElementById('map'), o.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 = o.scroll.mouse(e),
movey = y-my,
top = ey+movey;
check = o.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 = o.scroll.mouse(e);
my = mouse;
var element = $(this).position();
ey = element.top;
o.scroll.update(e);
},
mousemove: function(e){
if (mouseDown)
o.scroll.update(e);
return false;
},
mouseup: function(){
if (mouseDown)
mouseDown = false;
return false;
},
mouseleave: function(){
if (mouseDown)
mouseDown = false;
return false;
}
});
}
}
}

$(function(){ o.init(); });