Tutorial: Google Maps usando el API de Twitter

  • Autor Autor Maiden Alan
  • Fecha de inicio Fecha de inicio
Maiden Alan

Maiden Alan

1
Zeta
Marketing
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
InteractiveGoogleMapTwitter.jpg


ESTRUCTURA:

Al principio vamos a escribir algo de código HTML simple.
Hacer clic para expandir...
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.
Hacer clic para expandir...

Javascript

Al principio hay que definir las variables globales.
Hacer clic para expandir...

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.
Hacer clic para expandir...

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.
Hacer clic para expandir...

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'😉
Hacer clic para expandir...

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.
Hacer clic para expandir...

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:
Hacer clic para expandir...

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.
Hacer clic para expandir...

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.
Hacer clic para expandir...


Demostracion : Interactive Google Map using the Twitter API

Link hacia el Tutorial original: Interactive Google Map using the Twitter API | Codrops
 
Última edición:
Muy interesante! No se que uso darle, pero lo voy a estudiar.
Saludos!
 
Última edición:
Hay que estar conectado o registrado para responder aquí.

Temas similares

N
  • Cerrado
Me ofrezco Creador de bot usando la api de twitter solo en php
Respuestas
0
Visitas
206
Norlan30
N
K
Cómo obtener tuits con una foto usando la API de Twitter y un hashtag específico
Respuestas
3
Visitas
802
krusty72
K
Ronald Mirabal
Tutorial: Tres fanbox flotantes y deslizantes de Facebook, Twitter, y Google+ usando CSS
2
Respuestas
24
Visitas
8K
7KOU
7
Atrás
Arriba