Linea de Codigo » Google

Mi primera extensión en Google Chrome

Víctor Cuervo — Thu, 30 Sep 2010 06:00:38 +0000

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

Similar Posts:

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

Víctor Cuervo — Wed, 23 Sep 2009 06:00:30 +0000

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.

<html>
<head>
<title>Ventana de información con imagen</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=CLAVE" type="text/javascript"></script>
 
<script type="text/javascript">
 
//
 
function load(){
  if (GBrowserIsCompatible()) 
     var map = new GMap2(document.getElementById("mapa"));    
 }
//]]>
</script>
</head>
<body onload="load();" onunload="GUnload();">
<h1>Ventana de información con imagen</h1>
<div id="mapa" style="width: 800px;height: 600px;">
</div>
 
</body>
</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:

map.openInfoWindowHtml(new GLatLng(40.381351,-5.764591),"
Casa Rural Los Tejos
 
 Distribución:
1 Habitación de matrimonio
2 habitaciones dobles
2 cuartos de baño completos
1 aseo
Cocina
...
 
");

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.
Similar Posts:

Poner un icono dentro de Google Maps

Víctor Cuervo — Sun, 21 Jun 2009 17:03:47 +0000

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:

Cargar Google Maps

<script src="http://maps.google.com/maps?file=api&v=2&key=miclave" type="text/javascript">script>

Definir un área para el mapa

 
<div id="mapa" style="width: 400px; height: 300px;">div>
 
script>

Instanciar el mapa

if (GBrowserIsCompatible()) {
  map = new GMap(document.getElementById("mapa"));
  map.setCenter(new GLatLng(40.655997,-4.700518), 15);
 }

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

 
var marker =   new GMarker(new GLatLng(40.655997,-4.700518));

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.

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

Similar Posts:

Añadir control de trafico con Google Maps

Víctor Cuervo — Sun, 18 Jan 2009 14:00:18 +0000

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:

 
new GTrafficOverlay();

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:

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.

 
if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("mapa"));
 map.setCenter(new GLatLng(47.645962,-122.236633), 10);
 
 map.addOverlay(new GTrafficOverlay());
}

Similar Posts:

Modificar longitud y latitud en Google Maps

Víctor Cuervo — Fri, 16 Jan 2009 23:00:25 +0000

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:

<script type="text/javascript">
 
var map;
 
function load(){
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("mapa"));
    map.setCenter(new GLatLng(40.655997,-4.700518), 15);
  }
}
</script>

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.

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

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

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:

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

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

Tipos de mapas con Google Maps

Víctor Cuervo — Tue, 13 Jan 2009 07:00:33 +0000

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:

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

Similar Posts:

Abrir una ventana de información en Google Maps

Víctor Cuervo — Tue, 22 Jan 2008 22:45:52 +0000

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:

<script src="http://maps.google.com/maps? file=api&v=2.x&key=CLAVE" type="text/javascript"></script>

Tendremos que sustituir la palabra clave por la clave que nos proporcione Google.

Lo siguiente será empezar cargando el mapa. Para ello utilizamos el objeto GMap2. Este objeto necesita el elemento HTML donde se cargará el mapa. Normalmente en una capa.

var map = new GMap2(document.getElementById("mapa"));

El elemento de nuestra página web, la capa, se tiene que llamar "mapa".

Ahora empezamos utilizando el método openInfoWindow. Este método recibe tres parámetros:

punto, representa el punto del mapa donde se abrirá la ventana. Este punto lo podemos abrir mediante un punto relativo al mapa GPoint o mediante un punto geográfico GLatLng.
nodo, representa el nodo DOM que se abrirá en la ventana de información.
opciones, opciones adicionales para la ventana de información

En el caso de crear un objeto GLatLang, los parámetros que se le pasaran será la longitud y latitud.

var punto = new GLatLng(40.381351,-5.764591);

Para el nodo vamos a crear un objeto de texto. En este caso nos apoyamos en el método document.createTextNode, el cual crea un simple elemento de texto.

document.createTextNode("Casa Rural Los Tejos");

El código quedará finalmente de la siguiente forma:

map.openInfoWindow(new GLatLng(40.381351,-5.764591), document.createTextNode("Casa Rural Los Tejos"));

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

Generando lineas geodésicas en Google Maps

Víctor Cuervo — Wed, 12 Dec 2007 07:00:33 +0000

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.

Si alguna vez voláis desde Europa a la costa oeste de los Estados Unidos (San Francisco, Seattle,...) podréis comprobar esta ruta y si tenéis suerte, disfrutar de unos bellos paisajes. Pero volvamos al código, que nos desviamos.

Google Maps, nos permite el trazar una línea geodésica entre dos puntos dados. Para ello nos apoyaremos en la clase GPolyline. La misma que nos sirve para crear un polígono definiendo sus vertices mediante longitudes-latitudes.

La estructura general de GPolyline es la siguiente:

GPolyline(latlngs,  color?,  weight?,  opacity?,  opts?)

Los parámetros son los siguientes:

latlngs, es un array de longitudes-latitudes. Las cuales representamos ayudándonos de la clase GLatLng.
color?, es el color de la línea que dibujará el polígono. La interrogación demarca su opcionalidad.
weight?, el ancho de la línea en pixeles.
opacity?, opacidad de la línea. Que se indicara con un valor entre 0 y 1.
opts?, las opciones del polígono. Para nuestro ejemplo el campo más importante.

Decimos que el parámetro opts es el más importante, ya que dentro de las opciones que se le pueden pasar a la clase GPolyline, una de ellas es geodesic. Esta propiedad indicará si la línea a pintar es una línea geodésica, valor true o línea normal, valor false.

A si que lo primero definimos esta propiedad.

var lineageodesica={geodesic:true};
var linearecta={geodesic:false};

Ahora inicializamos la clase GPolyline:

var geodesica = new GPolyline([
      new GLatLng(51.5002, -0.1262),  // Londres
      new GLatLng(47.6801, -122.3300)  // Seattle
], "#ff0000", 5, 0.7, lineageodesica);

Y solo nos quedará añadirla al mapa que hayamos cargado:

map.addOverlay(geodesica);

Ya tendremos cargada la línea geodésica en el mapa.

Una cosa interesante es que la clase GPolyline, nos devuelve la distancia entre los dos puntos con el método .getLength(). Así podremos saber la distancia entre los dos puntos marcados.

Visualizar el ejemplo | Descargar el código

Vía: Programa con Google.Similar Posts:

Mi primera gráfica Google Chart

Víctor Cuervo — Sat, 08 Dec 2007 21:30:33 +0000

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.

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

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ódigoSimilar Posts:

Comunicando dos direcciones en Google Maps

Víctor Cuervo — Sat, 09 Jun 2007 20:16:54 +0000

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.

Con Google Maps se suele utilizar una capa para posicionar el mapa. Con Directions, además del mapa, tendremos una segunda capa donde se mostrará el contenido de la ruta.

Es por ello que el código del cuerpo de la página será similar a este:

 
<table>
<tr>
<th>Itinerario</th>
<th>Mapa</th>
</tr>
<tr>
<td valign="top">
<div id="direcciones" style="width: 275px"></div>
</td>
<td valign="top">
<div id="mapa" style="width: 310px; height: 400px"></div>
</td>
</tr>
</table>

Hay que indicar que la capa donde cargaremos las rutas solo le damos el ancho, ya que dependiendo de la ruta que carguemos, su largo podrá ser uno u otro.

Con lo que respecta al código JavaScript lo que tenemos que hacer es instanciar la clase GDirections. Esta clase recibe dos parámetros. El primero es la variable en la que hemos instanciado el mapa y el elemento de la página donde hay que cargar la ruta.

panel_ruta = document.getElementById("direcciones");
ruta = new GDirections(map, panel_ruta);

Una vez que hemos instanciado la clase GDirections tendremos que cargar la ruta. Para ello utilizaremos el método .load(). Este método recibe dos parámetros, el primero es una cadena con la ruta que queremos trazar y el segundo el idioma en el que queremos que se nos presente la ruta.

Con respecto a la cadena de la ruta, esta deberá de seguir el siguiente patrón:

"from: ciudad_origen to: ciudad_destino"

El código que cargaría la ruta será el siguiente:

uta.load("from: Madrid to: Avila",{locale: 'es_ES'});

Con esto ya tendríamos cargada nuestra ruta en el mapa y el texto de la ruta en la capa de la ruta.

Una cosa muy importante es que la clase Directions es incluida en la versión 2.x del API de Google Maps. Es por ello que cuando realizemos la carga del API deberemos de comprobar que la versión que estamos utilizando es la 2.x y no la 2

<script src="http://maps.google.com/maps?file=api&v=2.x</strong>&key=tu_clave" type="text/javascript"></script>

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

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

Cargando Google Maps

Poner un icono dentro de Google Maps

Abrir una ventana de información en Google Maps

Añadir control de trafico con Google Maps