Archivo de la etiqueta: html

Eventos de ratón para un marcador en Google Maps

A continuación se enumerarán los distintos eventos que son disparados cuando se interactua con el ratón sobre un marcador de Google Maps.


google.maps.event.addListener(marker, "click", function (e) { log("Click"); });
google.maps.event.addListener(marker, "dblclick", function (e) { log("Double Click"); });
google.maps.event.addListener(marker, "mouseover", function (e) { log("Mouse Over"); });
google.maps.event.addListener(marker, "mouseout", function (e) { log("Mouse Out"); });
google.maps.event.addListener(marker, "mouseup", function (e) { log("Mouse Up"); });
google.maps.event.addListener(marker, "mousedown", function (e) { log("Mouse Down"); });
google.maps.event.addListener(marker, "dragstart", function (mEvent) { log("Drag Start: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "drag", function (mEvent) { log("Drag: " + mEvent.latLng.toString()); });
google.maps.event.addListener(marker, "dragend", function (mEvent) { log("Drag End: " + mEvent.latLng.toString()); });

Eventos de ratón para un marcador en Google Maps
4 (80%) 4 votes

Google Maps: crear un marcador con etiqueta

Antes de nada hay que indicar que es necesario añadir la referencia a la api de google maps para realizar lo que hace este post. Para crear un marcador que muestre una etiqueta con Google Maps podremos seguir el siguiente ejemplo. Marcador-google-maps

Crear un marcador básico

La clase google.maps.InfoWindow será la que nos permita visualizar la etiqueta. Estará asociada a un mapa y un marcador cuando decidamos abrirla con el comando: iw.open(map, marker); Si nos fijamos el lugar donde se mostraría la información sería en el click del marcador ya que hemos registrado un manejador del evento correspondiente en la última línea, esto desencadenará la visualización de la etiqueta.

var latLng = new google.maps.LatLng(49.47805, -123.84716); var homeLatLng = new google.maps.LatLng(49.47805, -123.84716); var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 12, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP }); var marker = new MarkerWithLabel({ position: homeLatLng, draggable: true, map: map, labelContent: "A", labelAnchor: new google.maps.Point(22, 0), labelClass: "labels", // la clase CSS para la etiqueta labelStyle: {opacity: 0.75} }); var iw = new google.maps.InfoWindow({ content: "Home For Sale" }); google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); }); 
Google Maps: crear un marcador con etiqueta
2 (40%) 1 vote

Crear marcadores en Google Maps con la API

Otra de las cosas muy interesantes que nos permite la API de google maps es poder utilizar los marcadores que queramos y situarlos a nuestro antojo dentro de un mismo mapa. Incluso podemos vincular este marcador con una url de tal modo que al hacer click sobre él nos lleve a otro contenido dentro de Internet.

Obtener la capa y asignarle al objeto “mapa”

En un principio deberás tener colocada dentro de tu página una capa vacía donde querrás ubicar el mapa. Lo normal será rellenar el mapa en el momento que carguemos la página.


...

<div id="map_canvas"></div>

...

Con jquery podemos utlizar el evento onload de la ventana para realizar todas las operaciones del mapa.


window.onload = function () {  

//Creamos las opciones que estarán asignadas al mapa

var options = {
 mapTypeControlOptions: {
 mapTypeIds: ['Styled']
 },
 center: new google.maps.LatLng(39.644024, -3.185656),
 zoom: 5,
 disableDefaultUI: true,
 mapTypeId: 'Styled'
 };
 var div = document.getElementById('map_canvas');  //En esta línea obtenemos la capa donde se ubicará nuestro mapa

//Creamos el objeto mapa de google con las opciones y asignamos la capa div html
 var map = new google.maps.Map(div, options); 

}

 

Cómo crear el marcador

Para crear un marcador es necesario dos objetos de google que son:

  • google.maps.Marker, será el propio marcador.
  • google.maps.LatLng, objeto que representa las coordenadas dentro del mapa.

Primero creamos un objeto LatLng , en él fijaremos la longitud y latitud del marcador.


var gijon = new google.maps.LatLng(43.532362, -5.661588);

Posteriormente creamos el marcador:


var marker_gijon = new google.maps.Marker({
 position: gijon,
 url: '/sedes/sede-gijon/',
 title: 'Gijón',
 map: map
 });

En este punto podemos ver en la propiedad “position” le asignamos la variable de tipo LatLng establecido previamente.

Title, será la cadena que se mostrará al pasar el ratón por encima.

Y “map” es el objeto mapa creado anteriormente.

La propiedad url no existe como tal en el objeto de google marker pero la creamos nosotros para establecer la dirección a la que se dirigirá posteriormente.

Para tratar esta dirección podemos utilizar el siguiente código:


google.maps.event.addListener(marker_gijon, 'click', function() {
window.location.href = marker_gijon.url;
});

Este ha sido un pequeño tutorial para crear marcadores en Google Maps con la API. Seguro que existen más posibilidades pero esto es solo una manera sencilla de empezar.

Crear marcadores en Google Maps con la API
Valora este artículo

Parámetros que podemos pasar al iframe de Youtube

Dentro de lo poco que nos permite personalizar youtube cuando insertamos un vídeo que no es nuestro está el pasarle parámetros por la url del src del frame en el que se inserta el vídeo.

Cuando insertamos el vídeo en una página el código es parecido al siguiente:


<iframe width="420" height="315" src="//www.youtube.com/embed/t3MHLYD6--g" frameborder="0" allowfullscreen></iframe>

Bien, pues podemos pasarle parámetros después de la url origen de esta manera:


<iframe width="420" height="315" src="//www.youtube.com/embed/t3MHLYD6--g?rel=0&showinfo=0&controls=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>

Si nos fijamos en el ejemplo anterior podemos ver los siguientes parámetros:

  • rel, indica si queremos que al finalizar el vídeo se muestren sugerencias de vídeos relacionados.
  • showinfo, este parámetro sirve para mostrar la información del vídeo en la parte superior.
  • controls, si queremos ocultar o mostrar los controles del vídeo.
  • modestbranding, borra el logo de “Youtube” de la barra de controles del vídeo.

Cada uno de estos parámetros pueden tomar el valor 0 o 1 (falso o verdadero).

Los parámetros que podemos pasar al iframe de Youtube son más bien escasos lo que hace de una personalización bastante complicada. Si se necesita llegar más lejos seguramente necesites utilizar jquery y el api de youtube.

Parámetros que podemos pasar al iframe de Youtube
Valora este artículo

Dar estilo a los mapas de google

Antes de nada decir que para dar estilo a los mapas de google es necesario utilizar la API de Google Maps.

Una vez dado de alta en este servicio se te ofrecerá un número de cliente que utilizarás para acceder a todas sus características.


<script src="http://maps.googleapis.com/maps/api/js?client=numerodecliente&sensor=true_or_false"
 type="text/javascript"></script>

Una vez añadido este código javascript. Podremos modificar los estilos de nuestro mapa a nuestro antojo. La referencia donde encontrarás toda la documentación es la siguiente:

https://developers.google.com/maps/documentation/javascript/reference?hl=es-ES

En este enlace podremos ver ejemplos de distintos estilos de mapas que podremos pintar:

Para utilizar correctamente cada uno de los ejemplo se ha de crear una capa con id=”map”. Esta capa será la que al cargar la página contenga el mapa.

 

 

 

 

 

Dar estilo a los mapas de google
Valora este artículo

Bug en imagenes Internet Explorer 8

Es posible que hayas sufrido en IE8 el siguiente problema:

Las imágenes “responsive” en IE8 se ajustan correctamente en anchura pero su altura se alarga o deforma.

Para solucionar esto el CSS debe hacer las imágenes responsive en ccs y tener la siguiente declaración añadida:

width: auto;

img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
/* vertical-align: bottom; */ /* Suppress the space beneath the baseline */
/* Responsive images */
/* @todo Add responsive embedded video. */
max-width: 100%;
height: auto;
width: auto;
}

Este bug en imágenes Internet Explorer 8 aparece debido a que no se ha metido el archivo normalize.css

Bug en imagenes Internet Explorer 8
Valora este artículo

Consumir una API con jQuery y AJAX

En este post intentaremos aprender a consumir una API con jQuery y AJAX.

Nota: en el ejemplo que vamos a desarrollar partimos con que nuestro servicio API se encuentra en la misma web donde vamos a desarrollar el cliente.

Partimos también con que existen dos métodos en la API: obtención de una lista de todos los productos (URI: “/api/products”) y seleccionar un producto por un identificador (URI: “/api/products/id“). La URI podrá cambiar dependiendo donde se ubique el servicio… en muchos casos puede ser del tipo “http://…”

Usaremos jQuery para realizar llamadas AJAX y actualizar la página con los resultados.

Empezamos por crear nuestro archivo vacío HTML. En él escribiremos lo siguiente:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Product App</title>
</head>
<body>

<div>
 <h2>All Products</h2>
 <ul id="products" />
 </div>
 <div>
 <h2>Search by ID</h2>
 <input type="text" id="prodId" size="5" />
 <input type="button" value="Search" onclick="find();" />
 <p id="product" />
 </div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
 <script>
 var uri = 'api/products';

$(document).ready(function () {
 // Send an AJAX request
 $.getJSON(uri)
 .done(function (data) {
 // On success, 'data' contains a list of products.
 $.each(data, function (key, item) {
 // Add a list item for the product.
 $('<li>', { text: formatItem(item) }).appendTo($('#products'));
 });
 });
 });

function formatItem(item) {
 return item.Name + ': $' + item.Price;
 }

function find() {
 var id = $('#prodId').val();
 $.getJSON(uri + '/' + id)
 .done(function (data) {
 $('#product').text(formatItem(data));
 })
 .fail(function (jqXHR, textStatus, err) {
 $('#product').text('Error: ' + err);
 });
 }
 </script>
</body>
</html>

Nota: Existen muchas maneras de obtener jQuery, en este caso lo obtenemos de un recurso compartido en Internet (http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js)

Obtener la lista de productos

Para obtener la lista de productos se envía una petición HTTP (GET) a la uri donde se encuentra el servicio API. (/api/products).

La función de jQuery getJSON envía una petición asíncrona AJAX. La respuesta esperará por tanto un array de objetos JSON.  La función “done” especifica que la respuesta ha llegado. Cuando llegue la respuesta actualizaremos el DOM con la información que hemos recibido.


$(document).ready(function () {
 // Send an AJAX request
 $.getJSON(apiUrl)
 .done(function (data) {
 // On success, 'data' contains a list of products.
 $.each(data, function (key, item) {
 // Add a list item for the product.
 $('<li>', { text: formatItem(item) }).appendTo($('#products'));
 });
 });
});

Obtener un elemento pasando un identificador

Para obtener un producto por un un identificador, enviaremos un petición HTTP GET a “/api/products/id“, donde id es el identificador de producto.


function find() {
 var id = $('#prodId').val();
 $.getJSON(apiUrl + '/' + id)
 .done(function (data) {
 $('#product').text(formatItem(data));
 })
 .fail(function (jqXHR, textStatus, err) {
 $('#product').text('Error: ' + err);
 });
}

Consumir una API con jQuery y AJAX
3 (60%) 2 votes

Recargar página automáticamente mediante la intrucción Meta refresh

Igual no es una instrucción muy conocida (o al menos yo no la conocía hasta ahora) pero existe una opción en html para indicar al navegador que la página se refresque pasado un cierto número de segundos.

Esta instrucción se representa mediante la etiqueta meta y se debería insertar dentro de la etiqueta <head> aunque en algunos casos pueda funcionar fuera de ella:


...

<header>

<META http-equiv=refresh content=10>

...

En el ejemplo anterior le estamos diciendo que la página se refresque automáticamente cada 10 segundos.

Existe la opción de indicarle al navegador que pasados un cierto número de segundos debe redirigir a una url especificada. En el siguiente ejemplo haremos que el navegador vaya a la url: “pagina.com” pasados 5 segundos.


<meta http-equiv="refresh" content="5; url=http://pagina.com/">

En este otro ejemplo que aparece a continuación le indicamos que redirija a la url “pagina.com” inmediatamente asignando a content el valor 0.


<meta http-equiv="refresh" content="0; url=http://pagina.com/">

Esta es una manera bastante elegante de recargar página automáticamente únicamente con html. Lógicamente existen otras maneras como pueden ser scripts realizados en javascript, php, asp, etc…

Recargar página automáticamente mediante la intrucción Meta refresh
Valora este artículo

Menús con scroll

En este post explicaré la forma de hacer menús con scroll típicos en sitios web de una sola página.

Antes de nada decir que existen unos cuantos plugins de jquery para realizar webs de una sola página en el que viene implementado ya un menú de este tipo. Por ejemplo son muy conocidos Smint y CoolKitten. En el ejemplo de este post utlizaremos jquery waypoints.

Lo primero que debemos hacer es crear las distintas secciones a los que se dirigirán los enlaces del menú.


...

<div id="seccion_1">...</div>

<div id="seccion_2">...</div>

<div id="seccion_3">...</div>

...

Posteriormente implementaremos el menú con enlaces a cada uno de las secciones establecidas anteriormente.


<div id="menu">

<ul>

<li><a id="menu_seccion1" href="#seccion_1">ir a seccion 1</a></li>

<li><a id="menu_seccion2" href="#seccion_2">ir a seccion 2</a></li>

<li><a id="menu_seccion3" href="#seccion_3">ir a seccion 3</a></li>

</ul>

</div>

Este menú necesitamos dejarlo fijo en algún punto para que sea visible durante todo el scroll de la página. Por ejemplo en nuestro caso lo situaremos debajo de la pantalla. Para ello usaremos css y la propiedad position fixed:


#menu

{

position:fixed;

bottom:0;

}

Con todo esto y utilizando únicamente html y css podemos crear un menú con scroll. El problema es si queremos que los elementos del menú se activen o desactiven dependiendo de que sección nos encontremos. Para hacerlo ya necesitaremos javascript. Con jquery y jquery waypoints podemos manejar eventos que se produzcan cuando el usuario se encuentre en una u otra sección de la página. No olvideis importarlo a vuestra página.


$('#seccion_1') .waypoint(function(direction) {

//esto se ejecutará cuando el usurio esté dentro de la sección 1

alert('esto se ejecutará cuando el usurio esté dentro de la sección 1');
}

Con esto, jquery y un poco de imaginación podemos hacer casi todo. Entre otras cosas cambiar la clase css de cualquier elemento del menú cuando se llegue a la sección indicada.


$('#seccion_1') .waypoint(function(direction) {

$('#menu_seccion1').addClass('menu_active');

}

Menús con scroll
Valora este artículo

Imagen en un input type submit

Si queremos poner una imagen en un input type submit es tan sencillo como no poner type=”submit” sino type=”image”. El form donde esté metido el input lo tomará como un botón de enviado del formulario.


<form action="enviar_form.php">

<input type="text" name="nombre"/>

<input title="boton enviar" alt="boton enviar" src="img/mi_imagen.jpg" type="image" />

</form>

</form>

Imagen en un input type submit
Valora este artículo