Tutorial: Google Maps usando el API de Twitter

Maiden Alan · 20 Jun 2011

ESTRUCTURA:

Al principio vamos a escribir algo de código HTML simple.

PHP:

<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>

Vamos a examinar el código línea por línea. El primer "div" se mostrará un mapa de Google. Otro "div" es el lugar donde se almacena la descripción, el nombre y la imagen de perfil de los usuarios de Twitter. A continuación, crear un "div", que mostrará los últimos 5 tweets.

Al final de la cuadra, se guarda el nombre de usuario de Twitter, que se utiliza para descargar la ubicación. Si esto ya está hecho, se puede proceder a escribir el código JavaScript.

Javascript

Al principio hay que definir las variables globales.

PHP:

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

Entonces se crea el objeto principal que se incorporan todas las funciones utilizadas por nosotros. La función más importante en este objeto es el "init" función.

PHP:

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

Vamos a crear un nuevo objeto llamado "mapa" en el principal "o" objeto. Es un objeto, donde se realizará la función de iniciar un mapa de Google puesto. La primera función de este objeto es el "tamaño" de la función, en el que dibujar el tamaño de la ventana actual. Esto es lo que necesitamos con el fin de mostrar el mapa en pantalla completa. Entonces se crea el objeto titulado "datos" con los parámetros: "zoom", "centro" y "mapTypeId". Cuando el DOM está listo llamamos a la función init.

PHP:

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(); }

El siguiente paso es crear un objeto, donde se recuperan los datos de usuario de Twitter, como el nombre, descripción, ubicación y la ruta a la imagen de perfil. En primer lugar, creamos una función donde se recupera el valor de la 'entrada' campos y lo guarda en el arreglo. La siguiente etapa es otra de las funciones que se enlaza a todos los elementos de las tablas creadas previamente. Así, mediante el uso de la API de Twitter, podemos extraer la ubicación del usuario y el uso de un servicio de geocodificación que se puede convertir a coordenadas geográficas. Al final, se muestra al usuario en el lugar correcto en el mapa y poner el nombre, la descripción y la foto de usuario a 'div' un espacio en blanco acaba de llamar 'twitter'😉

PHP:

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(); }

Por último, vamos a añadir un 'scroll' objeto que tiene una función llamada "init" que se encarga de desplazamiento de la div. Twitter 'verticalmente.

PHP:

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(); }

CSS

En primer lugar, vamos a integrar nuestro reset.css que se restablecerán todos los estilos básicos, y vamos a definir algunas propiedades principales:

PHP:

@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;
}

A continuación, vamos a definir los estilos para el mapa, los mensajes de Twitter y las descripciones.

PHP:

.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

En el tutorial de hoy ha aprendido a utilizar un servicio de geocodificación y cómo utilizar la API de Twitter. Un hecho importante a recordar es que Google ha impuesto algunas limitaciones a su servicio de geocodificación. El número máximo de solicitudes en un día desde una única dirección IP es 2500. Además, Twitter limitar la velocidad de la dirección IP desde la que se presentó la solicitud.

Demostracion : Interactive Google Map using the Twitter API

Link hacia el Tutorial original: Interactive Google Map using the Twitter API | Codrops

GabrielR · 20 Jun 2011

Muy interesante! No se que uso darle, pero lo voy a estudiar.
Saludos!

Tutorial: Google Maps usando el API de Twitter

Maiden Alan

GabrielR

Temas similares

Privacidad y transparencia

Privacidad y transparencia