feed twitter facebook LinkedIn facebook

Google » Mi primera extensión en Google Chrome

Septiembre 30, 2010 por Víctor Cuervo . 2725 visitas 1 Comentario Imprimir Imprimir

Mediante este artículo vamos a ver como podemos crear nuestra primera extensión en Google Chrome.

Pero antes de empezar, ¿qué son las extensiones de Google Chrome? Las extensiones de Google Chrome son componentes que se le pueden añadir al navegador web Google Chrome para ampliar la funcionalidad del mismo.

Si queréis, podéis informaros más sobre las extensiones de Google Chrome.

Lo primero que tenemos que saber para crear una extensión en Google Chrome es que hay que declarar un fichero manifest en formato json. Este fichero se llamará manifest.json. La estructura de manifest.json es la que define los elementos que contienen la extensión. A ver:

  • name, nombre de la extensión.
  • version, versión de la extensión.
  • description, descripción de la extensión.
  • icons, iconos que representan la extensión. Hay que proporcionar, al menos, dos. Uno que sea 48x48 y otro 128x128
  • browser_action, nos permite añadir un elemento a la barra de Google Chrome. Este será el elemento más importante de nuestra primera extensión en Google Chrome.

Así, podemos ir creando el fichero manifest.json:

{
  "name": "Mi Primera Extension",
  "version": "1.0",
  "description": "Extension que dice hola mundo",
}

Pero vamos a entrar en profundidad en browser_action. Y es que browser_action es una estructura en si mismo, la cual puede contener los siguientes campos:

  • default_icon, icono que saldrá en la barra del Google Chrome.
  • default_title, tooltip que se mostrará al pasar sobre el icono.
  • default_popup, fichero HTML que se abrirá al pulsar sobre la extensión.

Vamos añadiendo cosas a nuestro fichero manifest.json:

{
  "name": "Mi Primera Extension",
  "version": "1.0",
  "description": "Extension que dice hola mundo",
  "browser_action": {
    "default_icon": "logo.ico",
    "popup": "miprimeraextension.html"
  }
}

Vemos que el fichero que se abrirá al pulsar sobre la extensión en Google Chrome será "miprimeraextension.html". Así que será dentro de él dónde codificaremos lo que queramos mostrar en la extensión. En este caso será algo muy sencillo.

<html><head></head>
<body>
<h1>Hola Mundo!!</h1>
 
</body></html>

Así, tenemos 3 ficheros dentro de nuestro directorio.

/MiPrimeraExtension
|-- manifest.json
|-- miprimeraextension.html
|-- logo.ico

Ahora solo tendremos que instalarlo en Google Chrome. Para ello vamos al menú:

Tools » Developer Extensions

En la parte superior veremos que hay una opción que se llama Load unpacked extension. Al pulsar sobre esta opción se nos mostrará un explorador mediante el cual hay que elegir el directorio MiPrimeraExtension. Y ya tendremos la extensión instalada en Google Chrome.

Y el resultado de nuestra primera extensión en Google Chrome es el siguiente...

Google » Ventanas de información con imágenes en Google Maps

Septiembre 23, 2009 por Víctor Cuervo . 5758 visitas 1 Comentario Imprimir Imprimir

Ya hace tiempo que veíamos el ejemplo de cómo mostrar una ventana de información en Google Maps. Pero dicho ejemplo nos daba poco juego ya poniendo texto en la ventana de información no llegamos muy lejos.

Ahora vamos a ver como poner ventanas de información con imágenes. Bueno, con imágenes y con más cosas. La verdad que lo que hacemos es cargar una ventana de información que nos permita cargar HTML. Pero vamos por pasos... lo primero, siempre, crear un área para el mapa y cargar Google Maps.

  3. <title>Ventana de información con imagen</title>
  4. <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=CLAVE" type="text/javascript"></script>
  5.  
  6. <script type="text/javascript">
  7.  
  8. //<![CDATA[
  9.  
  10. function load(){
  11.   if (GBrowserIsCompatible()) 
  12.      var map = new GMap2(document.getElementById("mapa"));    
  13.  }
  14. //]]>
  16. </head>
  17. <body onload="load();" onunload="GUnload();">
  18. <h1>Ventana de información con imagen</h1>
  19. <div id="mapa" style="width: 800px;height: 600px;">
  20. </div>
  21.  
  22. </body>
  23. </html>

Los pasos, ya explicados en Cargando Google Maps, se pueden resumir en:

  • Cargar el script de Google Maps
  • Definir una capa donde irá el mapa
  • Cargar el Mapa, vía función onLoad, en la capa
  • Indicar la función GUnload en el onunload de la página, para liberar memoria

Cargar la ventana de información que lleve el HTML lo hacemos mediante el método .openInfoWindowHtml(). Este método recibe como parámetros la longitud-latitud, representado por una clase GLatLng, en la cual se abrirá la la ventana y el HTML que queremos cargar.

Así que incluir la imagen será tan sencillo como poner el siguiente código:

  1. map.openInfoWindowHtml(new GLatLng(40.381351,-5.764591),"
  2. <h3>Casa Rural Los Tejos</h1>
  3.  
  4. <img src='casarural.jpg' style='float:left;margin-right:40px;'> Distribución:
  5. <ul>
  6. <li>1 Habitación de matrimonio</li>
  7. <li>2 habitaciones dobles</li>
  8. <li>2 cuartos de baño completos</li>
  9. <li>1 aseo</li>
  10. <li>Cocina</li>
  11. <li>...</li>
  12. </ul>
  13.  
  14. ");

Vemos que no solo cargamos la imagen mediante la etiqueta IMG, si no que hemos incluido un titular con H3 y una lista de elementos con UL. El resultado... pues compruébalo tu mismo. :-)

Google » Poner un icono dentro de Google Maps

Junio 21, 2009 por Víctor Cuervo . 5630 visitas 1 Comentario Imprimir Imprimir

Para poner un icono dentro de Google Maps lo que tenemos que hacer es poner una marca. La marca está representada mediante la clase GMarker.

Los primeros pasos son los de siempre y que podéis leer detenidamente en Cargando Google Maps. Si bien, resumidamente, consisten en:

  1. Cargar Google Maps
    1. <script src="http://maps.google.com/maps?file=api&v=2&key=miclave" type="text/javascript"></script>
  2. Definir un área para el mapa
    1.  
    2. <div id="mapa" style="width: 400px; height: 300px;"></div>
    3.  
    4. </script>
  3. Instanciar el mapa
    1. if (GBrowserIsCompatible()) {
    2.   map = new GMap(document.getElementById("mapa"));
    3.   map.setCenter(new GLatLng(40.655997,-4.700518), 15);
    4.  }

Lo siguiente que pasaremos a realizar será la carga del icono dentro de Google Maps. Para ello creamos una instancia de la clase GMarker.

  1.  
  2. var marker =   new GMarker(new GLatLng(40.655997,-4.700518));
  3.  

La clase GMarker recibe como parámetro un punto: ya sea relativo al mapa (GPoint) o una Latitud-Longitud (GlatLng). En nuestro caso nos hemos decantado por la segunda opción y hemos pasado como parámetro de la clase GMarker una clase GlatLng.

Una vez creada la marca tendremos que insertarla dentro del mapa. Para ello utilizamos el método .addOverlay() de la clase GMap2. Finalmente nos quedan dos líneas de código muy sencillas, las cuales nos permiten poner un icono dentro de Google Maps.

  1.  
  2. var marker =   new GMarker(new GLatLng(40.655997,-4.700518));
  3. map.addOverlay(marker);
  4.  

Google » Añadir control de trafico con Google Maps

Enero 18, 2009 por Víctor Cuervo . 5100 visitas Sin Comentarios Imprimir Imprimir

Una de las cosas que nos ofrece Gogle Maps es información del tráfico de ciertas ciudades, indicando qué vias son más lentas y cuales más rápidas. Para ello utiliza el típico código de colores verde a rojo.

A parte de esto ofrece otras carácterísticas como puntos en los cuales hay accidentes, conocer el tráfico en un día y hora en concreto. Si bien, estas dos carácterísticas no están accesibles vía API (de momento) de Gogle Maps.

Añadir el tráfico a nuestro mapa será tan sencillo como superponer una capa al mapa. La capa que refleja el tráfico es GTrafficOverlay. Su creación será de la siguiente forma:

  1.  
  2. new GTrafficOverlay();
  3.  

Para añadir capas al mapa tenemos el método addOverlay() sobre la clase GMap2. Por lo cual añadir la capa de tráfico quedará de la siguiente forma:

  1. map.addOverlay(new GTrafficOverlay());

Solo nos habrá quedado cargar inicialmente el mapa y posicionarlo en una ciudad de la cual Google nos pueda dar información de tráfico. En nuestro caso hemos elegido Seattle.

  1.  
  2. if (GBrowserIsCompatible()) {
  3.  var map = new GMap2(document.getElementById("mapa"));
  4.  map.setCenter(new GLatLng(47.645962,-122.236633), 10);
  5.  
  6.  map.addOverlay(new GTrafficOverlay());
  7. }

Google » Modificar longitud y latitud en Google Maps

Enero 17, 2009 por Víctor Cuervo . 7958 visitas 5 Comentarios Imprimir Imprimir

Las posiciones dentro de Google Maps se indican mediante una longitud y una latitud. Concretamente Google Mapss nos ofrece la clase GLatLng, la cual pasándola como parámetro la latitud y la longitud nos devolverá un punto en concreto.

En este ejemplo vamos a crear un formulario que nos permita introduccir latitudes y longitudes que actualicen el centro del mapa cargado en pantalla.

Lo primero será cargar el mapa de Google Maps. Para ello utilizamos la función load() estándar:

  1. <script type="text/javascript">
  2.  
  3. var map;
  4.  
  5. function load(){
  6.   if (GBrowserIsCompatible()) {
  7.     map = new GMap2(document.getElementById("mapa"));
  8.     map.setCenter(new GLatLng(40.655997,-4.700518), 15);
  9.   }
  10. }

Hay que destacar que en este caso la variable que instancia el objeto GMap2, y por consiguiente el mapa, la declaramos fuera de la función, como una variable global. Esto lo hacemos ya que a posteriorío vamos a crear otras funciones que interactuen con el mapa.

En el cuerpo de la página, en el evento onLoad cargamos esta función y por cuestiones de optimización llamamos a GUnload en el evento onUnload.

  1. <body onload="load();" onunload="GUnload();">

Una vez cargado el mapa creamos el formulario. Esto es una tarea sencilla, ya que serán dos campos input de tipo text donde introduzcamos la latitud y la longitud. Al formulario le vamos a añadir dos botones. Uno que desplace el mapa a la latitud y longitud introducida por el usuario y el segundo que nos devuelva el mapa a la posición inicial.

  1.  
  3. <label for="latitud">Latitud: </label>
  4. <input type="text" id="latitud" value="40.655997">
  5. <label for="longitud">Longitud: </label>
  6. <input type="text" id="longitud" value="-4.700518">
  7. <input type="button" value="Cambiar" onClick="cambiar(document.getElementById('latitud').value, document.getElementById('longitud').value);"/>
  8. <input type="button" value="Punto de Origen" onClick="cambiar(40.655997,-4.700518);"/>
  9. </form>
  10.  

Vemos que ambos botones en el evento onClick están llamando a la función cambiar, la cual recibe dos parámetros longitud y latitud.

Ahora pasamos a codificar dicha función. Para mover el mapa a una latitud y longitud en concreto deberemos de utilizar el método .panTo, el cual recibe una clase GLatLng. La clase GLatLng es muy sencilla de instanciar, ya que solo hará falta indicarle la latitud y longitud.

El código de la función nos quedaría de la siguiente forma:

  1. function cambiar(latitud,longitud){
  2. 	map.panTo(new GLatLng(latitud,longitud));
  3. }

Vemos que el método .panTo lo ejecutamos sobre la variable global map que es la que instancia el objeto GMap2.

Google » Tipos de mapas con Google Maps

Enero 13, 2009 por Víctor Cuervo . 6834 visitas Sin Comentarios Imprimir Imprimir

Cuando cargamos un mapa con Google Maps, este, por defecto, se carga en su vista de mapa predeterminada. Esta vista es la del formato callejero.

Puede suceder que queramos cambiar el tipo de mapa que estamos mostrando. Los tipos de mapas que nos ofrece Google Maps son:

  • Mapa Callejero - G_NORMAL_MAP
  • Mapa Satélite - G_SATELLITE_MAP
  • Mapa Híbrido - G_HYBRID_MAP
  • Mapa mezcla de los tres anteriores - G_DEFAULT_MAP_TYPES

Nos apoyaremos en el método setMapType de la clase GMap2 para cambiar la visualización del mapa. Así, si queremos poner el mapa en formato satélite tendremos las siguientes líneas:

  1. var map = new GMap2(document.getElementById("mapa"));
  2. map.setCenter(new GLatLng(40.655997,-4.700518), 15);
  3. map.setMapType(G_SATELLITE_MAP);

Google » Abrir una ventana de información en Google Maps

Enero 22, 2008 por Víctor Cuervo . 8953 visitas 5 Comentarios Imprimir Imprimir

Una de las cosas que podemos hacer sobre los mapas de Google Maps es abrir una ventana de información. Esta nos servirá para dar información adicional sobre el punto localizado.

Para ello el propio objeto GMap2 nos ofrece un método llamado openInfoWindow. Lo primero que tenemos que hacer es cargar el API de Google Maps. Para ello utilizamos el siguiente código JavaScript:

Continue reading Abrir una ventana de información en Google Maps...

Google » Generando lineas geodésicas en Google Maps

Diciembre 12, 2007 por Víctor Cuervo . 7688 visitas 11 Comentarios Imprimir Imprimir

Una línea de geodésica es la línea de menor longitud entre dos puntos dados. Podríamos hablar de la distancia menor entre dos puntos terrestres.

Y es que si vemos un mapa del mundo aplanado, la distancia más corta entre dos puntos no es una linea recta, sino que será la línea geodésica.

En el artículo base de este original, el autor habla de un viaje Londres-San Francisco, en el cual la ruta que se sigue no es la línea recta que atravesaría todo Estados Unidos, sino que el avión sube hasta Groelandia y entra por la frontera de Canada, siguiendo la línea geodésica.

Continue reading Generando lineas geodésicas en Google Maps...

Google » Mi primera gráfica Google Chart

Diciembre 8, 2007 por Víctor Cuervo . 5950 visitas Sin Comentarios Imprimir Imprimir

Google nos ofrece un servicio para poder generar gráficas en tiempo real llamado Google Chart, el cual podemos utilizar en nuestras páginas web.

Su funcionamiento es muy sencillo, ya que simplemente tendremos que hacer invocaciones al servidor de Google Chart, para que este, mediante una petición GET nos componga las gráficas en tiempo real.

De esta forma bastará con insertar una URL en la barra de navegación para ver el resultado:

http://chart.apis.google.com/chart?
            cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

En el caso que queramos añadirlo a nuestra página web, podemos utilizar la etiqueta HTML IMG, y en el atributo src indicar la URL.

<img src="http://chart.apis.google.com/chart?
      cht=p3&chd=s:hW&chs=250x100&chl=Hello|World" alt="Mi primera grafica">

Esto funciona ya que el resultado de la petición GET es una imagen PNG.

Grafico Google Charts

Hay que tener en cuenta que hay un límite de 50.000 peticiones diarias. Es por ello que si queremos usarlo de forma masiva, sería bueno el realizar algún tipo de cache de las imágenes.

Vía: TuFunción

Visualizar el ejemplo | Descargar el código

Google » Comunicando dos direcciones en Google Maps

Junio 9, 2007 por Víctor Cuervo . 7332 visitas 9 Comentarios Imprimir Imprimir

Hace unos días podíamos leer en aNieto2K y Tu Función que Google Maps había ampliado su API con Directions.

Directions nos permite mostrar la ruta que hay dentro de un mapa entre dos puntos.

Continue reading Comunicando dos direcciones en Google Maps...