Google

Seguramente ya han escuchado acerca de Google plus, la nueva red social de Google que esta causando revuelvo entre todos los internautas y es que las noticias se han esparcido casi de manera viral a través de todas las redes sociales, los usuarios mas puristas prefieren mantenerse al margen y seguir utilizando, twitter o linkedin por ejemplo. Sin embargo abemos otros que hemos conseguidos invitaciones de Google+ y las hemos repartido rápidamente entre nuestros amigos.

Existe mucha controversia sobre que si Google+ esta causando un alto impacto en los usuarios referente a que red social es la mejor tal es el caso que por internet están circulando infinidad de imágenes graciosas haciendo referencia a una lucha entre Facebook y Google+.

Decidí recopilar algunas que considero muy buenas para mostrarlas aquí en el blog :).

Sin mencionar que varios usuarios que ya pertenecen a la red social han protestado diciendo que Google plus es una comunidad para gente con mas nivel (si saben a lo que me refiero :p).

Si tienes alguna imagen que consideres muy buena deja el link en los comentarios y con gusto la añadiré a este post.

salu2

Google Maps es sin duda una tecnología muy utilizada hoy en día y es posible que cualquier persona pueda hacer uso de ella en una aplicación web por ejemplo, su implementación es bastante sencilla y es completamente configurable, a continuación les enseñare brevemente como podemos insertar un mapa con una coordenada y un icono pre configurado.

Lo primero que tenemos que hacer es mandar llamar la librería

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Después preparamos nuestro código:

jQuery(document).ready(function() {
      var mapCenter = new google.maps.LatLng(19.69950000000000000000,-101.20028000000000000000);
      var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      activeMap = new google.maps.Map(document.getElementById("div_map"), myOptions);
      var devLocation = new google.maps.LatLng(19.69950000000000000000, -101.20028000000000000000);
      var image2 = 'http://preview.zonau.com.mx/img/marker_venta.png';
      var marker = new google.maps.Marker({
        position: devLocation,
        map: activeMap,
        title:"",
        icon: image2
      });
});

Tranquilos que ahora explicare que hace cada cosa 🙂

var mapCenter = new google.maps.LatLng(19.69950000000000000000,-101.20028000000000000000);

con el metodo new google.maps.LatLng(); le damos las coordenadas en las que comenzara la vista del mapa, guardamos los datos en la variable mapCenter.

Vayan a la seccion de Mapa (la pestaña de mapa junto a la de video, plano e imagen).

Después de eso, para inicializar el mapa creamos el objeto Map Options que tendrá las configuraciones iniciales.

      var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

zoom: especifica el nivel de zoom con que se iniciara, entre mas zoom mas cerca.
center: indica la coordenada inicial que previamente definimos
mapTypeId: el tipo de mapa que utilizaremos, se aceptan los siguientes parámetros:

ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.
SATELLITE, que muestra imágenes de satélite.
HYBRID, que muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.).
TERRAIN, que muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, etc.).

Ya inicializado después tenemos que indicar el contenedor del mapa, en este casi un div con id div_map y le pasamos como parámetro el objeto de inicializacion myOptions

activeMap = new google.maps.Map(document.getElementById("div_map"), myOptions);

Ahora ya con esto nuestro Mapa esta funcionando, pero no nos conformamos con eso x’D, crearemos un marcador 🙂

var devLocation = new google.maps.LatLng(19.69950000000000000000, -101.20028000000000000000);
      var image2 = 'http://preview.zonau.com.mx/img/marker_venta.png';
      var marker = new google.maps.Marker({
        position: devLocation,
        map: activeMap,
        title:"",
        icon: image2
      });

De la misma manera creamos una nueva coordenada y las almacenamos en devLocation después de image2 cargamos una imagen que será el icono de nuestro marcador y por ultimo creamos el objeto pasándole como parámetro los atributos position (la posición devLocation que indicamos), map (nuestro mapa! el ActiveMap), title (un titulo para el marcador), icon (el recurso, image2).

Esta es una buena manera de complementar información haciendo uso de ubicaciones geográficas :), sin embargo cuando son muchísimos los datos que tenemos que marcar en un mapa no lo aremos manualmente, entonces tenemos que hacer uso de una tecnología para mandar los datos, como por ejemplo JSON o XML (en mi proyecto Zonau – U hago uso de JSON y varias otras cosas).

Google Maps también nos permite cargar layers en nuestro Mapa por medio de código KML, pero eso será para un post futuro 🙂