Archivo de la etiqueta: javascript

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()); });

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); }); 

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.

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.

 

 

 

 

 

Error: The message received from the server could not be parsed

Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed

Si te encuentras con este error seguramente estés utilizando UpdatePanel… ¿no es así?

Incluso es posible que te pase inadvertido si no tienes activado el depurador de javascript.

E hilando más fino… ¿este error solamente te aparece en Internet Explorer?

Si todas tus respuestas han sido «sí» entonces es posible que te estés encontrando con el mismo problema con el que me encontré yo.

Te comento la manera en que yo solucioné este error:

Borrar cualquier código javascript que tengas dentro del updatepanel y sitúalo fuera.

Espero que te haya servido.

ValidationSummary salta al inicio de la página

Este problema surge cuando en una página ASP con scroll se tiene un control Validation Summary. Al pulsar el botón que desencadena la validación en cliente la página «sube» hasta arriba cuando en muchos casos lo deseable es que no se mueva.

Si se quita el Validation Summary el salto no lo hace.

Para solucionar este problema existen dos soluciones:

  • Trabajar la validación únicamente en servidor, esto significa desactivar validaciones de cliente para todos los controles de validación (EnableClientScript=»false»)
  • Deshabilitar la función ScrollTo de javascript. Esto sería con este código:

<script type="text/javascript">
window.scrollTo = function() { }
</script>

Recorrer un array con jQuery

Para recorrer un array con jQuery podemos utilizar el comando .each(). Su definición es:

jQuery.each( collection, callback(indexInArray, valueOfElement) )

Es decir pasamos como primer parámetro el array y como segundo una función que recibe como el índice del elemento recorrido y su valor.

Un ejemplo de su uso:


var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };

jQuery.each( obj, function( i, val ) {
 $( "#" + i ).append( document.createTextNode( " - " + val ) );
});

En el ejemplo anterior se crearían los siguientes textos:

-1
-2
-3
-4
-5

…colocados respectivamente dentro de elementos dentro del DOM cuyos identificadores sean: «one», «two», «three», etc…

Unobtrusive validation en ASP NET 4.5

Unobstrusive validation (algo así como validación no obstrusiva) es una nueva característica introducida en ASP.NET 4.5. En un escenario normal cuando usamos un validador para validar cualquier control en el lado cliente se genera cierto código javascript automáticamente que se encarga de realizar esa funcionalidad.

Con la característica Unobstrusive Validation no se genera este código javascript pero para realizar la validación utiliza los atributos HTML5 data-*.

Cuando se crea un nuevo proyecto web con Visual Studio 2013 esta característica está por defecto habilitada.

Para manejar el valor en el que se establecerá esta característica podremos hacerlo de dos formas:

  • Dentro de <appSettings> en web.config:

Habilitado:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms"/>

Deshabilitado:

<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
  • En Application_Start dentro del global.asax:
void Application_Start(object sender, EventArgs e)
{
//Habilitar característica Unobtrusive Validation
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms;
//Deshabilitar característica Unobtrusive Validation
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}

Bundling y Minification en ASP.NET 4.5

Bundling es una nueva característica dentro de ASP.NET 4.5 que hace fácil combinar diversos ficheros en un único fichero. Esto es muy recomendable porque acelera sustancialmente la carga de la página y con ello mejora el rendimiento de la aplicación.

No hay que confundir bundling con minification, pero… ¿qué signfica Minification? Seguro que os habéis preguntado en alguna ocasión por qué en muchos ficheros que os descargáis por la red existen dos ficheros uno con extensión min.css o min.js y otro sin él. El fichero min es básicamente el mismo pero en él se eliminan los espacios en blanco no significativos, comentarios y se acortan los nombres de las variables. El objetivo final de esto es acortar el tiempo de carga de estos ficheros.

Los ficheros donde se utilizan estas técnicas son archivos javascript y css.

Bundling y minification se habilitan o deshabilitan en base al valor de la propiedad debug dentro del elemento compilation del web.config.

Si debug=»true» entonces el agrupamiento y la minificación estarán deshabilitadas. Es lógico, si queremos depurar la aplicación y queremos que el código sea legible necesitaremos distintos archivos y líneas de código, no un «tocho» de código dentro de una misma línea.

Si debug=»false» entonces se habilitarán estas dos características.

En un proyecto web creado con plantilla con Visual Studio podremos observar que existe un fichero llamado startup.cs gestionado por OWIN que se ejecuta al iniciar la aplicación.En este fichero se llama a un fichero de configuración de bundling llamado BundleConfig.cs (dentro del directorio App_Start) que se encarga de asignar los Bundling y Minification.

 

 

 

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');

}