Flasheves » javascript http://www.flasheves.com programacion, analisis , diseño Sat, 07 Jan 2012 00:53:31 +0000 en hourly 1 http://wordpress.org/?v= Google Maps + Geolocalizacion http://www.flasheves.com/google-maps-geolocalizacion/?utm_source=rss&utm_medium=rss&utm_campaign=google-maps-geolocalizacion http://www.flasheves.com/google-maps-geolocalizacion/#comments Wed, 15 Dec 2010 18:10:24 +0000 eveevans http://www.flasheves.com/?p=381

Con la salida de la versión 3 de la API de Google Maps (para javascript) no se necesitan más API keys para trabajar sobre los mapas de Google, y la verdad han mejorado bastante la manera de tratar con ellos.

De manera sencilla, para hacer una invocación de un mapa necesitaremos:

  • La librería javascript de Google Maps
  • Un espacio donde dejaremos caer el mapa (un div o realmente cualquier declaración tipo bloque )
  • El script que hagamos para invocar el mapa y agregarle interactividad

Reuniendo estos elementos nos queda algo así:

<html>
 <head>
 <!-- Invocar la libreria de Google Maps-->
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 <!-- Script donde creamos el mapa y agregamos interactividad-->
 <script type="text/javascript">
 function dibujar_mapa() {
 var centro = new google.maps.LatLng(12.129334, -86.266365); // Coordenadas del centro del mapa
 var opciones = { // parametros del mapa
 zoom: 12, // Zoom, puede ir desde 1 a 18
 center: centro, // definimos el centro (que previamente fue establecido en la variable latlng)
 mapTypeId: google.maps.MapTypeId.ROADMAP // Tipo de Mapa
 };
 var map = new google.maps.Map(document.getElementById("mapa"),opciones); // Hacemos que el mapa se dibuje en la el elemento #mapa
}
 </script>
 </head>
 <body onload="dibujar_mapa()"> <!-- Cuando cargue el sitio dibujar mapa -->
 <div id="mapa" style="width:100%; height:100%"></div>
 </body>
</html>

Ver Ejemplo

Si queremos agregar algún punto, agregaríamos al script anterior, lo siguiente:

var marcador = new google.maps.Marker();
 marcador.setPosition(centro);
 marcador.setMap(map);

Ver Ejemplo

Geolocalización

Ahora la parte de la Geolocalización, basicamente consiste en obtener tu dirección IP y basado en eso recopilar información sobre los puntos de acceso  cercanos para proporcionarte una aproximación de tu ubicación. En las versiones recientes de los navegadores modernos ya podemos contar con esta característica.

Para trazar nuestra posición tenemos que ubicar en el centro del mapa nuestra posición para luego dibujarla.

function getUsersLocation() {
 if (navigator.geolocation) { // Preguntar si el navegador soporta geolocalizacion
 navigator.geolocation.getCurrentPosition(function(position) {//obtener nuestra posicion
 var pos = new google.maps.LatLng(position.coords.latitude,
 position.coords.longitude);
 map.panTo(pos); //Mover el mapa hasta la nueva posicion geolocalizada
 }, function() {
 // En caso de no encontrar la ubicacion hacer algo
 });
 }
}

Momento de mezclar todo:

<html>
 <head>
 <title> Flasheves - Experimento de Geolocalizacion con javascript </title>
 <style type="text/css">
 html, body {
 height: 100%;
 margin: 0;
 }

 #map {
 height: 100%;
 }
 </style>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 <script type="text/javascript">
 function init() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(function(position) {
 var pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
 var marcador = new google.maps.Marker();

 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 14,
 center: pos,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 marcador.setPosition(pos);
 marcador.setMap(map)

 }, function() {
 alert("nel pastel, su navegador tiene que soportar Geolocalizacion");
 });
 }
 }

 google.maps.event.addDomListener(window, 'load', init);

 </script>

 </head>
 <body>
 <div id="map"></div>
 </body>
</html>

Ver Ejemplo

Creo que el código se entiende por si mismo, a grandes rasgos lo que hace es:

  • Llamar las librería necesaria para Google Maps
  • Crear el espacio para dibujar el mapa
  • En caso que el navegador soporte geolocalización > obtener nuestra posición
  • Dibujar el mapa tal como lo hicimos en el primero ejemplo, con la diferencia que esta vez trazará como centro nuestra posición
  • En caso nuestro navegador no soporte geolocalización mostrar un mensaje

La geolocalización cada vez tiene más presencia, ya hemos visto ejemplos como Foursquare, Google Places, Facebook Places , sacando más provecho aún con la ola de nuevos dispositivos con GPS. Así mismo  se podrían crear iniciativas locales, para terminar les dejo los enlaces de La documentación oficial de Google Maps y esta muy buena presentación expuesta en el Google Dev Fest.

]]> http://www.flasheves.com/google-maps-geolocalizacion/feed/ 2 La hormiga más amiga de la hormiga js http://www.flasheves.com/la-hormiga-mas-amiga-de-la-hormiga-js/?utm_source=rss&utm_medium=rss&utm_campaign=la-hormiga-mas-amiga-de-la-hormiga-js http://www.flasheves.com/la-hormiga-mas-amiga-de-la-hormiga-js/#comments Tue, 26 Jan 2010 23:54:05 +0000 eveevans http://www.flasheves.com/?p=142 hmiga

migaA raiz que me encontre con esta imagen, se me ocurrió un pequeño script para hacer una broma. ( Además tengo la meta de escribir almenos un post por semana, asi que esto cuenta xD )

Lo único que deben hacer es:
1. Copiar el siguiente script
2. Entra a cualquier página ( preferiblemente con fondo claro )
3. Pegar en la URL del navegador, el código que copiaron
4. Presionar Enter

javascript:(function(){insecto= document.createElement("div");insecto.innerHTML="<img src='http://28.media.tumblr.com/tumblr_kwv92nwuIw1qzcj42o1_100.gif'></div>";insecto.setAttribute("style","position:fixed;top:0;left:0;");document.body.appendChild(insecto);})();

O mejor aún puedes agregar el siguiente enlace a tus Bookmarks para usarlo cuando quieras:

Hormiga

( para agregar en enlace a tus bookmarks arrastra el enlace a tu barra de bookmarks, o click derecho y agregar a favoritos)

]]> http://www.flasheves.com/la-hormiga-mas-amiga-de-la-hormiga-js/feed/ 3