Archivo de la etiqueta: javascript

Como crear límites (bounds) con la API de Google Maps v3

En el trabajo necesitaba poner en un mapa varios puntos y seguidamente hacer un zoom y centrar la vista en medio de estos puntos.
Para esto he utilizado la siguiente función javascript, que me he creado. Es necesario llamar a la api de google maps versión 3.

Como podeis ver, es facilita, solo guardamos en unas variables la latitud y longitud máximas, latitud y longitud mínimas, con las que crearemos los puntos para el objeto bounds, el cual es una pareja de objetos latln. Uno será el punto SO, el de latitud longitud mínimos y el otro será el punto NE, el de latitud longitud máximo.
El paràmetro list és un array de JSON donde tenemos los diferentes datos del punto a añadir, tales como la latidud y longitud.
Una vez creado el bound, simplemente tenemos que pasárselo al mapa. Lo podemos hacer de la siguiente forma:

var map, bounds;
map = new google.maps.Map(div, opts); /* div es el objeto en el cual se pintará el mapa. opts son las diferentes opciones de del mapa */
bounds = createBounds(list);
map.fitBounds(bounds);

No és necesario hacer un map.setCenter(), porque ya lo hace automáticamente el fitBounds.

oEmbed: Convertiendo enlaces en contenido integrado

Esta entrada es una traducción de un tutorial de woorkup, que describe como usar la api de oEmbed para mostrar contenido integrado en la web como són fotos de Flickr, videos de YouTube o Vimeo, entre otras cosas.
Pero, ¿que es oEmbed? oEmbed es un formato que nos permite hacer lo antes descrito, insertar contenido en nuestra web, a partir de un enlace.
Un muy buen ejemplo es Facebook, en el muro, cuando insertamos un enlace de youtube, por ejemplo, que automáticamente nos muestra una miniatura del video seleccionado.

Pues bien, esto es relativamente fácil de implementar en javascript. Más concretamente con el framework jquery y un plugin para jquery llamado jquery-oembed, que se encarga de las peticiones y monta el código resultante.

En la própia página woorkup, teneis un ejemplo hecho por su autor. Otro ejemplo está en la página donde podemos encontrar el plugin para jquery.

Como podreis ver, la idea es simple. Espero os guste 😀