Skip to main content

Obtener coordenadas un marcador google maps

En este video tutorial te mostraré como obtener las coordenadas de la posición de un marcador de Google Maps después de haberlo arrastrado, usaremos la Geolocalización de HTML 5, y también explicaré como incrustar un mapa en nuestro sitio web usando la API de Google Maps, debajo del video encontrarás el código comentado del ejemplo para que pruebes su funcionamiento.

Espero que sea de tu ayuda, cualquier duda o aclaración comenta en este post y no olvides suscribirte a mi canal y seguirme en mis redes sociales.

 

Código

 

Leer Más

Geo localización JavaScript

Actualmente esta funcionalidad en las aplicaciones web y móviles se ha popularizado, ejemplos de esto son foursquere, Google Maps, Facebook entre otras.

Con HTML5 obtener la ubicación del usuario es muy fácil pero tenemos que tener en cuenta que no todos los dispositivos cuentan con un GPS que permite una localización más precisa por una triangulación de antenas y satélites, otros solo cuentan con conexión vía ISP y el navegador típicamente tomará esta información por IP o por triangulación de puntos de acceso Wi-Fi.

Para implementar la geo localización debemos asegurarnos de que el navegador soporta la API de geo localización de HTML5.

Para recuperar la localización del usuario haremos uso del objeto navigator.geolocation y la función básica para este caso es getCurrentPosition(), su sintaxis es :

getCurrentPosition(FuncionExito[,FuncionError],opciones);

FuncionExtito le dice al navegador al cual función debería llamar si los datos de localización han sido encontrados como disponibles. La función indicada toma los datos de la localización obtenida y actúa en consecuencia.

FuncionError, este parámetro llama a una función en curso de que la petición de localización falle por alguna razón que escapa de nuestro control. Es opcional pero es una buena práctica.

Opciones, aquí se maneja internamente a su vez tres parámetros opcionales que se encierran entre los símbolos “{ }”.

  • enableHighAcurrency:  indica al navegador que utilice una fuente de información exacta si está disponible. Los valores posibles son TRUE o FALSE. NOTA : Usted no puede controlar la fuente de información.
  • Timeout:Le indica el monto de máximo de tiempo del que dispone para calcular la posición actual. Si el cálculo no se completa en el tiempo indicado, la función de error se dispara. El valor se da en milisegundos.
  • maximumAge: Señala que tan vieja puede ser la información de localización antes de volver a recalcularla. El valor también se indica en milisegundos.

 

 

Ejemplo

 

Leer Más

Paginacion y filtrado de tablas con javascript

Hace unas semanas mientras desarrollaba una aplicación web, en la cual necesitaba mostrar tablas ,y por la cantidad de registros tenia que mostrarlos paginados , del lado del servidor usaba CodeIgniter  y aunque este framework tiene un librería para paginas datos , no tiene una para filtrarlos o realizar búsquedas,por eso empecé a buscar una hecha para poder usarla.

Dentro de las que puede encontrar la mejor fue DataTable esta librería además de paginar datos  permite hacer funciones de auto completado para filtrar resultados, ordenamiento,cargado dinámico a través de AJAX entre mas funcionalidades gracias a que tiene una API para que puedas extenderla para lo que se ocurra.

Veremos ahora como usarla con la configuración inicial, lo primero que debemos hacer es abrir nuestro editor de texto preferido y creamos un nuevo archivo con la estructura básica HTML5 .

Después descargargamos Jquery ya que DataTable depende de esta.Tenemos dos  formas de usar Jquery descargandolo a  nuestra computadora o cargándolo remotamente.

Ahora descargamos DataTable, al igual que Jquery podemos descargarlo o mandar a cargar usando el CDN.

Ahora solo nos faltan los datos que queremos paginar para esto copia el siguiente código y ponlo dentro del tag body de nuestro ducumento.

solo falta inicializar el plug in de la siguiente manera , crearemos otro archivo llamado table.js, y dentro de este pondremos lo siguiente.

Nuestro archivo HTML quedaría de la siguiente manera.

Y si abrimos en   nuestro navegador el archivo podras ver algo como esto(click en la imágen para verla en grande).

demo data tableLes dejo el link para que descarguen los archivos.

DESCARGAR ARCHIVOS

Leer Más

Calcular el tiempo transcurrido Javascript

Calcular el tiempo transcurrido

El método getTime devuelve el número de milisegundos transcurridos desde la medianoche del 1 de enero de 1970. Para cualquier fecha anterior a esa, devuelve un número negativo.

Puede usar el método getTime para establecer una hora inicial y final para calcular el tiempo transcurrido. Se puede utilizar para medir unidades pequeñas, como unos segundos, y unidades grandes, como días.

En el ejemplo siguiente se calcula el tiempo transcurrido en segundos. El método getTime obtiene el número de milisegundos desde la fecha cero.

Para trabajar con unidades más controlables, puede dividir los milisegundos proporcionados por el método getTime por un número adecuado. Por ejemplo, para convertir los milisegundos en días, divida el número por 86.400.000 (1.000 milisegundos x 60 segundos x 60 minutos x 24 horas).

En el siguiente ejemplo se muestra el tiempo que ha transcurrido desde el primer día del año especificado. Se usan operaciones de división para calcular el tiempo transcurrido en días, horas, minutos y segundos. No tiene en cuenta el horario de verano.

 

 

Leer Más

Objetos JSON

JSON significa JavaScript Object Notation o notación de objetos JavaScript. No es más que una forma muy potente y poco conocida de crear e instanciar objetos que tomo un significado nuevo a partir de las aplicaciones AJAX.

Su notación es tan sencilla que en la actualidad se utiliza en muchos lenguajes para el transporte liviano de objetos.

Sintaxis

Un objeto JSON está encerrado entre llaves ( { } ) y contiene propiedades separadas por comas, cuyos nombres deberían estar encerrados entre comillas ( aunque la mayoría de las implementaciones los acepta sin ellas ); cada propiedad tiene un valor separado por dos puntos ( : ) y cada valor puede ser :

  • Un String encerrado entre comillas.
  • Un número.
  • Una función.
  • Otro objeto JSON.

Ventajas

Las ventajas son muchas, es sencillo y rápido de escribir , su lectura es comprensible y se puede navegar por el objeto con notación de punto, como cualquier objeto JavaScript.

Un JSON como todo objeto JavaScript puede recorrerse con un for in para saber las propiedades que posee.

JSON con funciones

Un JSON también puede contener funciones, que pueden transportarse como cualquier otra variable.

Usos

En el presente , JSON se utiliza para :

  • Definir enumeraciones o constantes para evitar problemas de escritura por ejemplo:

  • Transportar objetos entre el cliente y el servidor a través de AJAX, en remplazo de XML. Para ello, se recibe el objeto como string. Por medio de la propiedad responseText para hacer que JavaScript interprete a JSON como tal y no solo como string, hace falta ejecutar el código siguiente que evalúa el JSON:

Antes de hacer eval , es necesario están seguros que es un JSON valido, si no generará una excepción, la cual se puede capturar con un try ,o ejecutar código JavaScript si lo fuera , con la posibilidad de un problema de seguridad de inyección.

Del lado del servidor

Cuando enviamos un objeto JSON al servidor , tenemos que tener instalado una librería especial para poder manejar la información, en PHP desde la versión 5.2.X , esta librería ya viene instalada por defecto su uso es el siguiente:

La función JSON_decode() , decodifica el objeto JSON y lo convierte en un arreglo asociativo en cambio , JSON_encode() hace la función inversa , de un arreglo asociativo a un objeto JSON.

Leer Más

AJAX con JavaScript

Esta entrada daremos la introducción a la tecnología de AJAX, este será la primera publicación sobre este tema, en futuras entregas publicare como implementarla para desarrollar aplicaciones ricas en internet.

Lo primero que se preguntaran es, ¿Qué es AJAX?, la palabra es el acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano.

Toda aplicación que usa AJAX usa al objeto XMLhttpRequest , por eso mismo veremos un poco de historia y después como usar este objeto para desarrollar aplicaciones interactivas.

El objeto XMLHttpRequest

Empezaremos con un poco de historia , corría el año de 1998 cuando Microsoft libero una tecnología conocida como Remote Scripting que permitia por medio de un applet Java, realizar peticiones desde JavaScript al servidor sin que el usuario lo notara y sin que cambiara la URL del sitio web.

Al año siguiente la empresa lanzo Internet Explorer 5.0 (La pesadilla de los desarrolladores web de la época) y en este incorporó, bajo la tecnología ActiveX un objeto llamado XMLHttp, que remplazaba a Remote scripting sin necesidad de que el usuario tenga instalada una máquina virtual Java.

Esta tecnología paso desapercibida hasta que 5 años después un conjunto de empresas (Google, Yahoo, AOL, etc.) retomaron el concepto y comenzaron a aplicarlo en sus servicios web para lograr interfaces ricas jamás antes vistas desde la llegada del HTML.

Es así como el objeto XMLHttp es el corazón de toda aplicación AJAX dado que es el que permite realizar peticiones al servidor en forma asíncrona y sin cambiar de URL.

La competencia de IE implementaron un objeto clon que lo denominaron XMLHttpRequest. Este objeto es nativo de JavaScript y tiene los mismos métodos y propiedades que el objeto ActiveX de Microsoft.

Estas dos versiones del objeto XMLHttp se convirtieron durante mucho tiempo en el dolor de cabeza de muchos desarrolladores, hasta que IE 7 implementó el objeto XMLHttpRequest en forma nativa.

Modo de uso

Ya que nos pusimos en contexto veamos cómo se implementa esta tecnología.

Para hacer una petición al servidor es necesario seguir los pasos siguientes:

  1. Instanciar el Objeto antes mencionado.
  2. Configurar y abrir la petición.
  3. Definir una función que se encargue de administrar la evaluación de la petición.
  4. Enviar la petición y los datos al servidor.
  5. En la función definida antes, manipular el estado de la petición y en que caso correcto recibir los datos y actuar en consecuencia con ellos, según lo que se quiera hacer.

 

Instanciar el Objeto

Para esto declaramos una variable y asignamos el objeto como lo muestra el código de abajo:

 

Configurar y abrir la petición.

Para configurar y preparar la petición antes de enviarla al servidor usaremos el método open(), este recibe los datos de configuración como son el método por el cual se enviaran los datos, los más utilizados son GET o POST , la URL a donde se hará la petición y si la petición será asíncrona o no, el uso del método seria como el siguiente:

Código para preparar la conexión.

 

Ya que se configuro y esta lista la petición para su envió, usaremos el método send(), cabe mencionar que si en el método anterior configuramos como método de envio a GET , el método send recibe como parámetro NULL, ya que los datos fueron enviados por medio de la URL.

En caso contrario los datos serán pasados en el formato

.

Código del uso del método send().

Propiedades

Ahora veremos las propiedades para poder llevar el monitoreo y administración de nuestra petición.

ReadyState

La propiedad de solo lectura readystate devuelve el código numérico entre 0 y 4, inclusive, que indica en qué estado se encuentra la petición.

 

Código

Estado

Descripción

0

Sin inicializar

El requerimiento solo fue instancionado. Muchos navegadores no manejan este código y pasan directamente al siguiente

1

Cargando

El requerimiento se configuro con open pero todavía no se envía.

2

Cargado

El requerimiento de envió o se está enviando, aunque todavía no tenemos respuesta alguna del servidor

3

Interactivo

El servidor ya respondió la petición, ya tenemos disponibles las cabeceras pero el contenido todavía se esta descargando.

4

Completo

La petición ya finalizó y el contenido está completo.

 

 

Status

Es muy importante no confundir esta propiedad con la anterior, la propiedad status devuelve el código HTTP que nos devolvió el servidor.

Código

Descripción

200 La petición se pudo procesar en forma correcta.
404 La URL a la que realizamos la petición no existe en el servidor.
500 Error interno del servidor. Puede indicarnos que el servidor está saturado o que hay algún error en el script ejecutado en el servidor.
400 La petición enviada al servidor es errónea. Hay algún inconveniente con las cabeceras o con la información POST enviada.
403 No tenemos permiso de acceder al recurso en el servidor.
405 No se acepta el método. Hay un problema al definir los métodos POST o GET.
414 La URL pedida es muy larga. Puede producirse cuando se envían muchos datos por GET. En este caso, se debe cambiar al método a POST.
503 El servidor esta temporalmente no disponible.

 

Como vemos en la tabla anterior, el código que se debe esperar de una petición correcta será 200.

Ahora agregamos esta condición a la anterior.

ResponseText

Esta propiedad de solo lectura devuelve un string con el contenido del cuerpo devuelto por el servidor ante la petición. Solo tenemos seguridad de que los datos están correctos cuando readystate sea 4 y status sea 200.

Esta propiedad se utiliza para recibir del servidor tanto información textual como HTML, código JavaScript u objetos JSON.

Onreadystatechange

De todas las propiedades descritas hasta ahora, esta es la única que se utiliza antes de enviar la petición.

El objeto XMLHttpRequest posee un solo evento estándar, que se puede y se debe capturar para procesar la petición dado que se está tratando con una petición asíncrona donde el objeto se encarga de avisarnos cuando la petición termina.

La propiedad onreadystatechange, entonces debe asignarse a una función que se ejecutara de manera automática cada vez que la propiedad readystate cambie su valor de entre 0 y 4.

De esta forma cuando el estado llegue a 4 ya estaremos listos para leer los datos que nos devuelve el servidor.

Para asignarle una función a esta propiedad tenemos dos opciones, la primera es definir una función anónima o en línea y la segunda es almacenar una función en una variable, al usar la segunda opción tenemos que tener cuidado de no usar los paréntesis ya que en vez de almacenar la función estaríamos ejecutándola.

Esta propiedad deberá definirse antes o después del método open y antes del send para que el código funcione correctamente.

Implementación

Ya que vimos los métodos y propiedades del objeto XMLHttpRequest haremos una pequeña demostración para esto haremos una petición al servidor para que nos devuelva un mensaje “Hola Mundo en AJAX”, este tutorial tenemos dos archivos index.html y Ajax.php.

En el archivo index.html pondremos el código javascript y la estructura HTML, en Ajax.php ira el mensaje que nos devuelve el servidor, estos dos archivos tienen que estar en algún servidor web y en la misma carpeta.

Ajax.php

Leer Más