Hey! In today’s tutorial we will create an interactive Google map using the geocoding service. Using the Twitter API we will retrieve the user’s location, and then display the profile picture on the map. We will also add the click action, after which we will retrieve the user’s 5 latest tweets.

So, let’s start!

The Markup

At the beginning let’s write some simple HTML code.

<div id="map"></div>
<div class="twitter">
	<div class="inside"></div>
</div>
<div class="posts"></div>
<div class="get">
	<input type="hidden" value="marcinmobily" />
	<input type="hidden" value="codrops" />
	<input type="hidden" value="onextrapixel" />
	<input type="hidden" value="smashingmag" />
	<input type="hidden" value="umutm" />
	<input type="hidden" value="1stwebdesigner" />
	<input type="hidden" value="chriscoyier" />
	<input type="hidden" value="marcofolio" />
</div>

Let’s examine the code line-by-line. The first “div” will display a Google map. Another “div” is the place where we store the description, name and profile picture of the Twitter users. Next, we create a “div” which will display the last 5 tweets.

At the end of the block, we store the Twitter user name, which will be used to download the location. If this is already done, we can proceed to write the JavaScript code.

The JavaScript

At the beginning we should define the global variables.

var map, geocoder, marker, ey, my, mouseDown = false;

Then we create the main object that will incorporate all functions used by us. The most important function in this object is the ‘init’ function.

var map, geocoder, marker, ey, my, mouseDown = false;
var o = {
	init: function(){
		// in this place we will call all needed functions
	}
}
$(function(){ o.init(); }

Let’s create a new object called “map” in the main “o” object. It is an object, where the function initiating a Google Map will be placed. The first function in this object is the “size” function, where we draw the current window size. This is what we need in order to display the map in full screen. Then we create the object entitled “data” with the parameters: “zoom”, “center” and “mapTypeId”. When the DOM is ready we call the init function.

var map, geocoder, marker, ey, my, mouseDown = false;
var o = {
	init: function(){
		this.map.init();
	},
	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();
			});
		}
	}
}
$(function(){ o.init(); }

The next step is to create an object, where we will retrieve the Twitter user data such as name, description, location and the path to the profile picture. First, we create a function where we will retrieve the value of the ‘input’ fields and we will store it in the array. The next stage is another function where every element of previously created tables is looped. Thus, by using the Twitter API, we can extract the user’s location and using a geocoding service we can convert it to geographic coordinates. At the end, we show the user in the right place on the map and put the name, description and user picture to a blank ‘div’ just called ‘twitter’ ;)

var map, geocoder, marker, ey, my, mouseDown = false;
var o = {
	init: function(){
		this.map.init();
		this.twitter.show();
		this.twitter.click();
	},
	twitter: {
		get: function(){
			var arr = new Array;
			$('.get').find('input').each(function(i){
				var t = $(this),
					val = t.val();
				arr[i] = val;
			});
			return arr;
		},
		show: function(){
			var users = o.twitter.get(),
				arr = new Array;
			for (i in users){
				var user = users[i];
				$.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();
			});
		}
	}
}
$(function(){ o.init(); }

Lastly, we will add a ‘scroll’ object that has a function called ‘init’ which is responsible for scrolling the ‘.twitter’ div vertically.

var map, geocoder, marker, ey, my, mouseDown = false;
var o = {
	init: function(){
		this.map.init();
		this.twitter.show();
		this.twitter.click();
	},
	twitter: {
		get: function(){
			var arr = new Array;
			$('.get').find('input').each(function(i){
				var t = $(this),
					val = t.val();
				arr[i] = val;
			});
			return arr;
		},
		show: function(){
			var users = o.twitter.get(), // retrieve all users which are stored in html
				arr = new Array;
			for (i in users){
				var user = users[i];
				$.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(); }

The CSS

First, we will embed our reset.css that will reset all the basic styles, and we’ll define some main properties:

@import url("reset.css");

html, body {
	margin:0;
	padding:0;
}

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333;
	line-height:18px;
}

a {
	text-decoration:none;
	color:#fff;
}

Next, we will define the styles for the map, Twitter posts and descriptions.

.twitter {
	position:fixed;
	left:0;
	bottom:0;
	background:#000;
	background:rgba(0, 0, 0, .7);
	width:100%;
	height:180px;
	color:#fff;
	overflow:hidden;
}

.twitter .inside {
	position:absolute;
	top:0;
	left:0;
	cursor:n-resize;
}

.twitter .item {
	float:left;
	width:280px;
	padding:20px;
}

.twitter .item .img {
	float:left;
	width:48px;
}

.twitter .img img {
	-moz-box-shadow:0 0 5px #000;
	-webkit-box-shadow:0 0 5px #000;
	box-shadow:0 0 5px #000;
}

.twitter .item .entry {
	float:right;
	width:215px;
	height:140px;
	color:#eee;
	font-size:11px;
	position:relative;
}

.twitter .item .count {
	position:absolute;
	left:0;
	bottom:-10px;
	font-size:10px;
	text-transform:uppercase;
}

.twitter .item .title {
	font-size:13px;
	font-weight:bold;
	color:#fff;
}

.twitter .item .url a {
	text-decoration:underline;
}

.twitter .item p {
	margin-bottom:5px;
}

.posts {
	display:none;
	position:absolute;
	left:50%;
	margin-left:-310px;
	width:580px;
	bottom:180px;
	background:#fff;
	color:#fff;
	background:#000;
	background:rgba(0, 0, 0, .7);
	padding:20px;
}

.posts .post {
	float:left;
	clear:both;
	width:100%;
	margin-bottom:20px;
	font-size:12px;
	font-weight:bold;
}

Conclusion

In today’s tutorial you learned how to use a geocoding service and how to use the Twitter API. An important fact to remember is that Google has imposed some limits to its geocoding service. Maximum number of requests in one day from a single IP address is 2500. Also, Twitter will rate limit the IP address from which the request was made.

Stay tuned for the next tutorial!

View demo Download source

If you have a news website, it might be interesting for you to allow your users to see the latests tweets about a topic. Here is a jQuery plugin for showing the latest tweets about a certain word or phrase.

For this plugin we are using the jQuery Twitter Search Plugin.

Words or phrases that you want to be searched for in Twitter, are wrapped with the following span:

<span class="twitter_search">Some search term</span>

The popup box that appears can be dragged and resized. Clicking on the cross will make it disappear. The tweets are constantly being loaded in a predefined time span. This loading stops when the user hovers over the tooltip box.

If you want to configure and restyle the tooltip, you will need to have a look at the configurations of the Twitter Search Plugin. Many parameters can be set here, from style to timings.

You can call the plugin like this:

$(function() {
	$('#article').find('.twitter_search').twitterpopup();
});

where #article should be replaced by the ID of your container.

View demoDownload source

There are lots of JavaScript libraries out there and many of them are in use on social media sites like twitter. This Twitter plugins uses the popular jQuery library, article contains a sampling of jQuery twitter plugins I’ve found useful.

Source

http://skyje.com/2010/07/twitter-jquery-plugins/

This application aims to show you who your first follower was in twitter. It’s done with PHP and jQuery and of course it uses the twitter API. Two of the available API methods are used : statuses/show and followers/ids. Note that the rate limit is 150 requests per hour (you can increase this) so it might happen that it stops working in some point of time :( For this reason I don’t provide a demo page, but you can download the application, and install it locally or in your web site and give it a try. Anyway, the purpose of this post is just to show you how to do it!

Download source

My next Twitter API experiment: Get the theme’s colors from any Twitter account!

With this PHP and jQuery code you can call the Twitter API and request the RGB color and the background image from a given user. In the provided demonstration you just have to input the username and hit enter – the theme will get loaded. Hover over the color rows to obtain the hexadecimal color values.

Not much said:

View demoDownload source

Today I was playing around with the Twitter API and created this little “widget” using jQuery and PHP. I know, there are already plenty of them, but I wanted to improve some details.

Some of the features are:

• You can get your most recent 100 followers or friends
• Followers or friends are shown in sets of 25 per widget page
• The images of the users are preloaded (unlike in Twitter)
• You can navigate through the set
• You can refresh the entire set
• More information on the user can be seen using a tooltip when hovering over his picture

You can configure and use this in your website to show your followers or friends with some interesting information about them (name, number of followers, number of friends).

A reason why 100 followers or friends are loaded in the beginning is the restriction the Twitter API is giving in the number of results per request. So, in order not to make several requests which would take quite some time, I just get 100. However, you can always click the link to the entire list in the end of the pagination.

The tooltip is created using qTip.

View demoDownload source

jMaxInput allows you to limit the input size of a textarea like it is done in Twitter. The number of characters left to type are shown while typing. The user can write as many characters as he wants (negative value is shown) but the text can only be submitted if the size of the input is below the limit (the button is active/inactive).

You can call it like this:

$("#div").maxinput();

You can as well define the following properties:

1. limit: The maximum number of characters allowed
2. position: The position of the message
3. showtext: Boolean for showing the text message or just the number of characters left
4. message: A custom message shown after the number of characters left

View demoDownload jMaxInput