Modificar la ventana de información de Google Maps

Modificar la ventana de información de Google Maps

ByLuis

Nos podemos encontrar con la necesidad de modificar la ventana de información de Google Maps, entre otras cosas porque suele ser un poco feo. En mi caso lo que quise hacer es quitar el marco que te viene por defecto y cambiar la imagen.

Esta vez no voy a explicar muy bien lo que hice, pero en el código se entiende lo suficiente.

// Yo tengo una lista de destinos, que mediante WP paso a una variable mapa
// los destinos tienen una imagen, un enlace y un nombre
var infoW = new google.maps.InfoWindow({
    content: '
'+mapa.destinos[i].thumb+'
'+mapa.destinos[i].name+'
'
  });
google.maps.event.addListener(infoW, 'domready', function() {
  var idx = this.content.replace(/.*infowindow_(\d+).*/, '$1');
  // El contenido que le paso a la ventana, al haber varios le tengo que meter un id con un indice
  var $info = jQuery('#infowindow_'+idx);
  // En este caso espero a que se cargue la imagen, la cual siempre va en los datos
  // y ajusto el tamaño de la ventana al ancho de la imagen
  $info.find('img').load(function() {
    $img = jQuery(this);
    // Esta capa ($ventana) contiene casi todos los elementos que tengo que modificar
    var $ventana = $info.parent().parent().css({top: 0, left: 0}).prev();
    // Almaceno el ancho y alto original para poder desplazar la ventana segun la diferencia de tamaños
    var h = $ventana.parent().height();
    var w = $ventana.parent().width();
    // Bajo (o subo) la capa que contiene mi contenido
    $info.parent().parent().css({top: h-$info.height()});       
    // Sombre del recuadro blanco que mete gmaps, ancho como la imagen, tamaño como el contenido y posicion correcta
    $ventana.find('> div:eq(1)').css({width: $img.width()-1, height: $info.height()+3, top: h-$info.height()});
    // Recuadro blanco que mete gmaps, ancho como la imagen, tamaño como el contenido y posicion correcta
    $ventana.find('> div:eq(3)').css({width: $img.width()-1, height: $info.height(), top: h-$info.height()});
    // Triangulo del  que mete gmaps posicion correcta
    $ventana.find('> div:eq(0), > div:eq(2)').each(function() {
      var $this = jQuery(this);
      $this.css({left: parseInt($this.css('left').replace(/[^\d]/g, ''))-((w-$img.width())/2)});
    });
    // Ventana contenedora de todo
    $ventana.parent().css({width: $img.width()-1, height: $info.height(), left: parseInt($ventana.parent().css('left').replace(/[^\d]/g, ''))+((w-$img.width())/2)});
    // Cambio el boton de cerrar
    $ventana.next().next().css({width: '17px', height: '20px', top: 5+h-$info.height(), right: 5}).html('');
  });
});

Taffy DB: usar JSON de forma similar a SQL

ByLuis

Interesante librería que nos permite acceder a datos JSON mediante una nomenclatura parecida a SQL. Así cuando desarrollemos una capa de Ajax podemos buscar entre los datos, o modificarlos mediante esta librería.

Unos ejemplos de uso serían los siguientes:

products.find({price:{lessthan:10},
type:{not:"Book"}});
friends.insert(
{name:"Brian",
gender:"M",
married:"No",
age:52,
state:"FL",
favorite_foods:["fruit","steak"]
});

Esta librería nos permite en sus 10K hacer consultas, insertar, borrar y actualizar datos, ordenar, realizar bucles, queries avanzadas, ordenar los datos y a parte es compatible con YUI, JQuery, Dojo, Prototype y EXT.

Taffy DB

Vía / AjaxLine

JsonSQL: consultas SQL sobre JSON

ByLuis

JsonSQL es una librería Javascript que nos permite realizar consultas sobre variables con formato JSON, mediante sintaxis SQL.

Por ahora solo está permitido las consultas SELECT y la verdad es que tiene bastantes limitaciones:

  • No admite espacios entre listas tipo “select campo1,campo2,campo3” o “limit 0,10”
  • Las condiciones en el WHERE serán condiciones Javascript y no SQL
  • La documentación es escasa y parece que no admite alias, joins, count o group by

Un ejemplo de consulta sería el siguiente:

sonsql.query("select title,url from json.channel.items where (category=='javascript' || category=='vista') order by title,category asc limit 3",json);

Una librería parecida y más completa es TrimQuery, de la cual ya hablamos hace tiempo. De todas formas, recomiendo no usar este tipo de librerías, que sí, son muy cómodas, pero no tengo muy claro que tengan buen rendimiento.

JsonSQL

Vía / AjaxLine

Formatea código JSON online

ByLuis

Suele pasar que el código JSON que generamos para que lo lea el navegador, suele estar falto de formato, por lo cual leerlo para depurarlo suele ser algo complicado. Realmente es buena idea no meterle espacios, saltos de línea o tabuladores para dejarlo “bonito”, ya que eso es desperdicio del ancho de banda (hay que ahorrar por todas partes).
JSON Formatter es una aplicación online que nos formatea el código JSON que introducimos, añadiendo espacios, tabuladores y saltos de línea para una mejor comprensión.
jsonformatter.png
JSON Formatter
Vía / dzone

JSONER: librería para JSON

ByLuis

JSONER es una librería Javascript para felicitar la creación de aplicaciones Ajax que necesiten de JSON. Nos ofrece diversas funcionalidades para llevar a cabo las tareas necesarias para trabajar con JSON.

Entre las utilidades que nos ofrece encontramos:

  • Herramientas genéricas: buscar datos, modificar HTML, comparar objetos JSON, acceder a propiedades.
  • API de eventos: para poder trabajar en estructuras tipo árbol.
  • Tratamiento como nodos: como si se tratara de un árbol (XML o parecido), podemos acceder a hijos, tratarlos, modificarlos y otras operaciones.
  • Búsqueda de datos: para especificar condiciones en la búsqueda y encontrar objetos en JSON.
  • Utilidades varias: clonar árboles JSON, unir árboles JSON, comparar dos modelos JSON, …

Supongo que habría que mirar el rendimiento de la librería o si nos compensa usar esta en vez de usar otra de las habituales, pero aún así, supone una ayuda para nuestros proyectos.

JSONER

Vía / dzone