gmaps.js

Es una librería para acceso a Google Maps muy potente y sencilla de utilizar: http://hpneo.github.io/gmaps/

Se descarga el código gmaps.js (utilizamos url relativo) en local y se ha de invocar importanto las siguientes librerías:

• <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
• <script type="text/javascript" src="gmaps.js"></script>

Funciones

Geolocalizar: nos indica nuestra posición con la ayuda del GPS, antena Wifi, Antena GSM, etc....

Función: GMaps.geolocate({..});
Le pasamos un objeto con tres propiedades que llevan un objeto tipo función y por eso lo que dan son tres manejadores:

• success: function(position) {..}: Se ejecuta en caso de que encuentre nuestra posición
• error: function(error) {..}: En caso de que no encuentre nuestra posición
• not_supported() {}: En caso de que el navegador no soporte la geolocalización.

position es la variable (objeto) donde se guarda nuestra posición. Dicha posición la podemos guardar en variables de la forma:

• lat = position.coords.latitude
• lng = position.coords.longitude

Redenrización de un mapa: nos muestra un mapa en pantalla
Creamos un objeto de tipo GMpas que podemos asignar a una variable (por ejemplo map) de la siguiente forma:

• map = new GMaps({..});

Le pasamos un objeto que tiene varios campos:

• el: lugar donde va a estar el mapa en nuestra página html
• lat: latitud
• lng: longitud
• zoom: valor del zoom del mapa
• click: evento click que enlaza con una función (manejador) que trata dicho evento
• tap: evento tap que enlaza con una función (manejador) que trata dicho evento

Nos crea un mapa centrado en las coordenadas lat y lng

Añadir una marca: tenemos que invocar sobre el objeto mapa el método addmaker pa´sandole un objeto con la propiedad latitud y longitud:

• map.addMarker({})

Parámetros:

• lat: latitud
• lng: longitud
• details:
• fences:
• outside:
• infoWindows: {..}: contenido de la ventana emergente

infoWindows:

• content: contenido de la vetana emergente cuando se hace click sobre la marca.

Otras opciones y eventos que admite addMaker:

https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

• title: Título de la marca. Aparece cuando se posa el ratón encima.
• icon: ".." icono que muestra en pantalla

Events: https://developers.google.com/maps/documentation/javascript/reference#Marker

Enlazar marcadores: define una ruta desde un punto a otro punto (en nuestro caso el punto definido al hacer click o tocar la pantalla). Se realiza invocando sobre nuestra mapa el método drawRoute:

• map.drawRoute({});

A este método le pasamos un objeto con las siguientes propiedades:

• origin:[lat,lng],
• destination: [e.latLng.lat(),e.latLng.lng()],
• travelMode: Tipo de ruta de google maps ('driving'...)
• strokeColor: color de la línea trazada
• strokeOpacidad: Opacidad de la línea trazada
• strokeWeight: ancho de la línea trazada

siendo e el elemento que llega cuando se hace click o tap

• function manejador(e) {....}

Otros recursos

• Guía para desarrolladores de la versión 2 del API de Google Static Maps 
• Versión 3 del API de JavaScript de Google Maps