En este post os referenciamos plugins para incluir mapas de Google en páginas y sitios web utilizando jQuery. En primer lugar os mostramos un par de tutoriales sobre como utilizar el framework de Javascript con el API de Google Maps y sobre como desarrollar interfaces en AJAX para usarlo.
Después veréis un listado con sus descripciones, enlaces a demos y links de descarga de los plugins más utilizados o los que destacan por su potencia o sencillez.
Tutorial sobre jQuery y Google Maps Tutorial
Se trata de un tutorial en el que se explica, paso a paso, como implementar códigos Javascript con el framework jQuery para incluir mapas de Google en nuestras páginas.
Demo del código desarrollado en el tutorial »
Tutorial sobre como almacenar y utilizar puntos en mapas con AJAX
Con este tutorial aprenderemos a almacenar y recuperar información sobre puntos de interés en un mapa, utilizando AJAX, en desarrollos PHP y con soporte de base de datos MySQL.
En primer lugar nos muestra como utilizar un formulario HTML para crear nuevas ubicaciones mediante la inclusión de los datos en el servidor a través de AJAX. El segundo paso nos enseña como buscar esos lugares en el servidor también a través de AJAX.
gMap – Google Maps Plugin
GMap es un ligero plugin jQuery que nos permite integrar Google Maps en tu sitio web. Con sólo 2 KB de tamaño es muy flexible y altamente personalizable.
Esta pequeña línea de código podemos incrustar el mapa:
$ ("# mapa".)GMap();
Se puede personalizar de muchas maneras diferentes, todo lo que necesitamos hacer es pasar un objeto JSON a la función GMap (), haga clic aquí para una lista completa de las propiedades que se pueden pasar.
Google Maps jQuery Plugin
Este plugin facilita mucho el trabajo con el API de Google Maps, permitiéndonos integrar fácilmente los mapas de Google en cualquier sitio web con facilidad.
Algunas de las opciones del mapa, como la capa div que lo contiene o la ventana de información, son configurables con hojas de estilo CSS, lo que nos permite personalizar el aspecto al estilo de nuestra página. Su peso es muy pequeño 12KB de código JavaScript. (9KB empaquetado) y se distribuye bajo la licencia GPL y la licencia del MIT.
Probado en: Firefox 3, Internet Explorer 8, Safari 4, Opera 10, Chrome 3
Descargar Google Maps jQuery Plugin »
Mapbox – the jQuery Map
Mediante la función mapbox () de este plugin jQuery podemos crear mapas a menor escala, incluir efectos de zoom, arrastrar porciones de contenido, etc.
jQuery GPS
GPS jQuery es un plugin de jQuery para incluir mapas de Google en páginas web sin que estas se vean inundadas por características y funcionalidades no deseadas.
Todo lo que se necesita para su funcionamiento es añadir, para las direcciones que queramos ver reflejadas en los mapas, una vista por defecto o personalizadas con un ID. Permite incluir una posición con un toolip o imagen en un punto determinado en la primera carga del mapa.
jMapping – creación de mapas de Google con marcación semántica
Este plugin, distribuido con licencia de MIT, está diseñado para una rápida implementación de mapas de Google que incluyan una lista de ubicaciones predefinidas en el código HTML mediante metadatos. De esta manera, mediante marcado semántico del código HTML, refleja todas las ubicaciones que queramos resaltar en le mapa y su información asociada.
Googlemap jQuery Plugin de Dylan Verheul
Este plugin facilita, en gran medida, incluir un mapa de Google en nuestras páginas. Los marcadores pueden ser proporcionados por un objeto jQuery (elementos que contienen en el microformato geo) o un conjunto de objetos que proporcionan la latitud, longitud y el texto que se mostrará en la ventana emergente que, opcionalmente, se puede añadir al código.
Necesitaremos una clave válida de Google Maps API. Está licenciado como jQuery (http://docs.jquery.com/License)
Descargar el código fuente de Googlemap jQuery Plugin y ver la demo »
imGoogleMaps – Múltiples direcciones
Este complemento se ha desarrollado para crear una aplicación simple con las opciones mínimas y básicas. La interfaz del mapa mostrado es similar a lo que se vería en Google Maps (modo automático), mientras que también da al desarrollador la posibilidad de dar estilo a la presentación (modo manual).
Además, este plugin te permitirá usar Ajax para recuperar una dirección, así como realizar una geocodificación inversa.
jMaps Framework
El framework JMaps proporciona una sencilla pero potente API para servicios de mapas de Google, que ofrece métodos jQuery para hacer funciones tales como: Geocode y revertir cualquier dirección válida en el mundo a través de API de geocodificación de Google, la búsqueda de direcciones, agregar y eliminar marcadores, polígonos y líneas, capas en el mapa, las capas de Google adsense, etc.
jQuery-PlacePicker
jQuery-PlacePicker es un widget de geocodificación con soporte para API de Google Maps v3 (y un entorno preparado para otras versiones) que muestra una interfaz de usuario para que el visitante de nuestra página web pueda buscar y seleccionar ubicaciones.
Descargar jQuery-PlacePicker »
jQmaps
jQmaps es uno de los complementos más populares para utilizar los mapas de Google. Permite añadir puntos de interés, globos expandibles con información y enlaces a puntos concretos del mapa.
Como pega, no ofrece ningún tipo de documentación ni tampoco tiene ninguna demostración de su forma de funcionamiento
Fuente: 10 jQuery Plugins for Easier Google Map Installation :Speckyboy Design Magazine.
The 10 Plugins jQuery Plugins para Google Maps by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.
Información Bitacoras.com…
Valora en Bitacoras.com: En este post os referenciamos plugins para incluir mapas de Google en páginas y sitios web utilizando jQuery. En primer lugar os mostramos un par de tutoriales sobre como utilizar el framework de Javascript con el API de Goo……
[...] This post was mentioned on Twitter by Noticias de medios, aws. aws said: 10 Plugins jQuery Plugins para Google Maps http://goo.gl/fb/GrJbk #herramientas #javascript #desarrolloweb [...]