Blog Tecnológico de Azalorea

Tras implementar Google Maps en algunos proyectos decidí crear una clase (no encontré ninguna que me ofrecía lo que biscaba) con las funcionalidades que necesito.

Al final resultó ser bastante modular y supongo que le puede servir a otra gente para facilitar el uso del API. Iré ampliandola con el tiempo según surja la necesidad.

Para usar la clase hay que disponer de Prototype y Scriptaculous (builder.js para la creación de nodos en caso de querer usar controles costumizados).

El uso de la clase es muy fácil:

myMap = new azaPlotter( ‘idDivDelMapa’ );
myMap.setCoords( latitud, longitud );
myMap.add_control( ‘tipoControl’ ); // opcional
myMap.add_custom_control( {img:’pathDeLaImagen’,x:posicionX,y:posicionY,onclick:miFuncion} ); // opcional
myMap.add_marker( posicionX,posicionY, ‘texto para el tooltip’ ); // opcional
myMap.draw();

add_control(): añade un objeto control predefinido por Google como el zoom o el tipo de vista (mapa,satélite,mixto).
add_custom_control(): añade un objeto control propio… por momento solo puede ser una imagen y la posición se define partiendo del rincón derecho arriba.
add_marker(). añade un objeto tipo marcador al mapa. El tooltip aparece cuando el usuario hace click en el marcador.

La diferencia entre el objeto control y el objeto marcador está en que el control es fijo y el marcador se mueve con el mapa.

Ir a la página de la librería

Es una primera versión que seguramente irá evolucionando

[UPDATE] He creado una página aparte para la librería en la cual se podrá seguir la evolución de la misma.

Hace cosa de una semana tuve que meterme con Google Maps para un proyecto. Al principio era todo muy fácil, rápido y salía a la primera. Pero al profundizar más en las posibilidades de repente se empezaron a complicar las cosas

Tras varias horas de investigación he conseguido resolver todos los problemas… y para que no se me olviden las apuntaré aquí…

La primera sorpresa era cuando me puse a probarlo en Internet Explorer… no se mostraba el mapa. El DIV para mostrar el mapa tenía la ID “map”… y por la razón que sea no le gustaba a IE… lo cambié a myMap y funcionó

Ya tenía todo funcionando en Firefox y Explorer, y me puse a implementar marcadores. Hasta este punto muy bien. Pero cuando quería hacer que se puedan arrastrar daban errores de JavaScript. Probé el ejemplo de Google en su página de documentación y daba los mismos errores .-(
Les mandé un reporte de error a Google y al día siguiente  volví a probar el ejemplo en la página de Google. Sorpresa… ya no daba error. En seguida probé mi implementació, pero seguía dando el mismo error.
Al mirarme el código fuente que usa Google me dí cuenta que la llamada al API era ligeramente diferente… la versión la definían cómo “2.x” en vez de “2″. Lo probé y resulta que entonces se carga una nueva versión de su API… la 2.73.

Y así el error desapareció… ya solo me quedaba adaptar mi código a los cambios del API (las variables de los marcadores han cambiado de nombre) y funciona.

Miguel