Tema: Mootools: Crear Mapa de Google Maps implementando la API

Hmmm, la práctica hace al maestro, y como soy un principiante con MooTools , y quiero aprender a usar la API de Goole Maps, bueno, mezclemos a ver que resulta .

Por ahora, escribí una clase para crear un Mapa de Google Maps pero, más que embeber maps.google.com quise usar el código de la API misma.

El código de la clase es el siguiente:

Código:

/*********************************** GoogleMapCreator Class **********************************/

var GoogleMapCreator = new Class({
	
	Implements:	[Options, Events],
	
	options: {
		size: {
			width:	'100%',
			height:	'100%'
		},
		zoom: 6,
		center: {
			lat: 7.6,
			lng: -74
		},
		mapTypeId: 'ROADMAP'
	},
	
	initialize: function (mapContainer, options) {
		this.mapContainer = mapContainer;
		this.setOptions(options);
		this.mapConfig();
		this.mapCreate();
	},
	
	mapConfig: function () {
		this.mapOptions = {
			zoom: this.options.zoom,
			center: this.createLatLng(this.options.center.lat, this.options.center.lng),
			mapTypeId: this.options.mapTypeId.toLowerCase()
		};
	},
	
	createLatLng: function (latitude, longitude) {
		latlng = new google.maps.LatLng(latitude, longitude);
		return latlng;
	},
	
	mapCreate: function() {
		this.mapContainer.setStyles({
		width:	this.options.size.width,
		height:	this.options.size.height
		});
		this.mapObj = new google.maps.Map(this.mapContainer, this.mapOptions);
	}
		
});

/*********************************** /GoogleMapCreator Class **********************************/

Un ejemplo de cómo implementarlo es el siguiente:

Código:

var map = new GoogleMapCreator($('map_canvas'), {
		size: {
			width: '80%',
			height: '80%'
		}
});

En el ejemplo redefino los valores de ancho y alto a 80%, 80% respectivamente que por defecto estarían en 100%, 100% respectivamente.

Pueden ver un ejemplo en el siguiente enlace:

Hazme click

buen post, queremos más de estos!

Vienen en camino

Hola gente de NeoTeo.

Bueno, he añadido algunos métodos más... de momento tal vez no entenderán cómo usar la clase aún pero más adelante, cuando ya tenga un poco más de forma, aspiro hacerles un pequeño tuto de cómo usar este script.

En mi caso, cada marca en el mapa apuntará a un recorrido 360º.
¿Qué colgarán ustedes?

Código:

/*********************************** GoogleMapCreator Class **********************************/

var GoogleMapCreator = new Class({
	
	Implements:	[Options, Events],
	
	options: {
		size: {
			width:	'100%',
			height:	'100%'
		},
		zoom: 6,
		center: {
			lat: 7.6,
			lng: -74
		},
		mapTypeId: 'ROADMAP'
	},
	
	initialize: function (mapContainer, options) {
		this.mapContainer = mapContainer;
		this.setOptions(options);
		this.mapConfig();
		this.createMap();
	},
	
	mapConfig: function () {
		this.mapOptions = {
			zoom: this.options.zoom,
			center: this.createLatLng(this.options.center.lat, this.options.center.lng),
			mapTypeId: this.options.mapTypeId.toLowerCase()
		};
	},
		
	createMap: function() {
		this.mapContainer.setStyles({
			width:	this.options.size.width,
			height:	this.options.size.height
		});
		this.mapObj = new google.maps.Map(this.mapContainer, this.mapOptions);
	},
	
	
	/**************************************************************
							API BASE CLASSES
	**************************************************************/
	
	createLatLng: function (latitude, longitude) {
		latlng = new google.maps.LatLng(latitude, longitude);
		return latlng;
	},
	
	
	/**************************************************************
					MAP CLASS (Google Maps API Class)
	**************************************************************/
	
	/*------------------------- METHODS -------------------------*/
	
	setCenter: function(latLng) {
		center = [latLng, this.getCenter()].pick();
		this.mapObj.setCenter(latLng);
	},
	
	getCenter: function() {
		center = this.mapObj.getCenter();
		return center;
	},
	
	setZoom: function(zoomLevel) {
		// Google API will convert IT downwards to the nearest integer.
		zoomLevel = [zoomLevel, this.getZoom()].pick();
		this.mapObj.setZoom(zoomLevel);
	},
	
	getZoom: function() {
		zoomLevel = this.mapObj.getZoom();
		return zoomLevel;
	},
		
	setMapType: function(mapType) {
		mapType = [mapType.toLowerCase(), this.getMapType].pick();
		this.mapObj.setMaypTypeId(mapType);
	},
	
	getMapType: function() {
		mapType = this.mapObj.getMapTypeId();
		return mapType;
	},
	
	getBounds: function() {
			bounds = this.mapObj.getBounds();
			return bounds;
	},
	
	panTo: function(latLng) {
		latLng = [latLng, this.getCenter()].pick();
		this.mapObj.panTo(latLng);
	},
	
	panToBounds: function(latLngBounds) {
		latLngBounds = [latLngBounds, this.getBounds()].pick();
		this.mapObj.panToBounds(latLngBounds);
	},
	
	setMapOptions: function(mapOptions) {
		mapOptions = [mapOptions, this.mapOptions].pick();
		this.mapObj.setOptions(mapOptions);
	}
	
});

/*********************************** /GoogleMapCreator Class **********************************/

¿Qué hay de nuevo?: los eventos de la clase MAP de la API.

Eventos añadidos:

BoundsChanged:
Este evento se activa cuando los límites de la ventana gráfica han cambiado.

CenterChanged:
Este evento se activa cuando la propiedad "center" del mapa cambia.

Click:
Este evento se activa cuando el usuario hace click en el mapa, pero no cuando hace clic en un marcador o en una ventana de información.

DoubleClick:
Este evento se activa cuando el usuario hace doble click en el mapa. Ten en cuenta que el evento de click se activará también justo antes de que se active este evento.

Drag:
Este evento se activa repetidamente mientras el usuario arrastra el mapa.

DragEnd:
Este evento se activa cuando el usuario termina de arrastrar el mapa.

DragStart:
Este evento se activa cuando el usuario empieza a arrastrar el mapa.

Idle:
Este evento se activa cuando el mapa queda inactivo después de hacer zoom o de desplazarse por el mapa.

MapTypeChanged:
Este evento se activa cuando la propiedad "mapTypeId" del mapa cambia.

MouseMove:
Este evento se activa cuando el cursor del ratón se mueve sobre el contenedor de mapa.

MouseOut:
Este evento se activa cuando el cursor del ratón sale del contenedor de mapa.

MouseOver:
Este evento se activa cuando el cursor del ratón entra en el contenedor de mapa.

ProjectionChanged:
Este evento se activa cuando ha cambiado la proyección.

Resize:
Los desarrolladores deben activar este evento en el mapa cuando el elemento div cambia el tamaño: google.maps.event.trigger(map, 'resize').

RightClick:
Este evento se activa cuando el evento contextmenu DOM se activa en el contenedor de mapa.

TilesLoaded:
Este evento se activa cuando los mosaicos visibles se han terminado de cargar.

ZoomChanged:
Este evento se activa cuando la propiedad "zoom" del mapa cambia.

Ejemplo de implementación:

Hazme Click

Código:

    var map = new GoogleMapCreator($('map_canvas'), {
        size: {
            width: '400px',
            height: '400px'
        }
    });
    
    map.addEvents({
        zoomChanged: function() {
            alert('Zoom has been changed !');
        },
        
        click: function() {
            alert('I have been clicked !');
        },
        mapTypeChanged: function() {
            alert('MapType has changed !');
        }
    });

Nota:

El código no cabe dentro de las 10.000 líneas posibles por post en el foro pero, en el enlace del ejemplo de implementación pueden encontrar el código de la clase. (No es que el código tenga más de 10.000 líneas, de momento lleva unas 320 con espacios, saltos de línea y comentarios, sino que por el ancho no caben)

Saludos desde

COlOMBIA

Espero les sea útil esta clase.

Actualizaciones recientes:

Recientemente he actualizado la librería y he añadido las clases Marker, InfoWindow de la API.

Digo librería porque ya dejó de ser una única clase a ser varias clases que interactúan entre sí.

En el archivo que estoy trabajando en mi compu ya he añadido las clases Circle y Rectangle de la API, y estoy trabajando ahora en Widgets.

El archivo ha crecido en número de líneas enormemente, en parte debido a los saltos de lineas y comentarios que yo añado para que sea legible y de fácil mantenimiento, pero van poco más de mil líneas de código.

Como no puedo postear el código ya por su extensión y no puedo adjuntar un archivo de javascript al post, pues igual está colgado en los foros de MooTools.

Pueden ir directamente al Post relacionado haciendo click aquí

o descargar el fichero map-javascript.js colgado en dicho post haciendo click acá

Apreciaría enormemente si alguien quisiese colaborar con la co-documentación de la librería o ejemplos colgados en jsfiddle.net

De igual forma, mi objetivo es hacerlo de fácil uso, por ello he agregado dos métodos a la clase GoogleMapCreator que hace uso de las demás clases para facilitar la creación de Marcadores simples y Marcadores con Información.

1. createMarker(markerOptions)
2. createInfoMarker(markerOptions, infoWindowOptions)

Ejemplo de Implementación:

Código:

var map = new GoogleMapCreator($('map_div'));
       
    map.addEvents({ 
        click: function(pos) {
            alert('El mapa fue clickeado en la ubicación : ' + pos);
        },
        rightClick: function(pos) {
            alert('El mapa fue clickeado derecho en la ubicación : ' + pos);
        }
    });
   
    var a = map.createMarker({
        center: {
            lat: 7.6,
            lng: -74
        }
    });
   
    var b = map.createMarker({
        center: {
            lat: 8,
            lng: -70,
        },
        draggable: true,
        title: 'Marcador Arrastrable'
    }).addEvents({
        click: function() {
            alert('Marcador Clickeado!');
        },
        dragEnd: function(pos) {
            alert('Usted ha soltado este marcador en la ubicación: ' + pos)
        }
    });
   
    var c = map.createInfoMarker({
        center: {
            lat: 7,
            lng: -72
        },
        title: 'InfoMarker'
    },
    {
        content: 'Este es el contenido de la Información del Marcador'
    });

Saludos desde COLOMBIA

Actualizaciones Recientes:

1. Añadida clase PolyLine
2. Añadida Distance Widget
3. Añadida Radius Widget (Distance Widget hace uso de esta)
4. Mejorado el método CreateInfoMarker (ahora es posible elegir un evento diferente dentro de los posibles para la clase GoogleMapMarker, por defecto es 'click')
5. Añadido método createPolyLine a la clase GoogleMapCreator

Nota: Le añadí métodos adicionales a la clase PolyLine, aprovechando los métodos de la clase MVCArray de la API de Google Maps.


Métodos extras de la clase PolyLine:

// Añade un elemento al final del conjunto y devuelve la nueva longitud del conjunto.
addLine(latLng)

// Inserta un elemento en el índice especificado.
insertLineAt(index, latLng)

// Elimina el último elemento del conjunto y devuelve dicho elemento.
removeLastLine()

// Devuelve el número de elementos del conjunto.
getLength()

// Elimina un elemento del índice especificado.
removetLineAt(index)

// Establece un elemento en el índice especificado.
setLineAt(index, latLng)

// Obtiene un elemento del índice especificado.
getLineAt(index)



Ejemplo de Implementación:

Código:

var map = new GoogleMapCreator($('map_canvas'));
 
var infoM = map.createInfoMarker({
        center: {
            lat: 7,
            lng: -72
        },
        title: 'InfoMarker'
    },
    {
        content: "This is the infoWindow content"
    },
    'mouseOver' // Will open the infoWindow when cursor enters the area of the marker icon.
    );
 
var distanceWidget = new DistanceWidget(map.mapObj);
 
/* 
        Creates a PolyLine on the map.
        Coordinates is an array of [lat,lng]
        e.g, coordinates: [[lat,lng], [lat2, lng2], [lat3,lng3],...so on]
 
arguments:  createPolyLine(coordinates, polyLineOptions)
 */
var polyLine = map.createPolyLine([[9,-75],[9,-79],[8,-79]]); // Creates a trhee points PolyLine.

Archivo:

Pueden seguir el post del foro de MooTools haciendo click aquí y descargar el correspondiente archivo map-javascript.js.

Buenas buenas.

Estoy reescribiendo la herramienta de medición de distancia (Distance Widget) desde cero ya que la anterior no hacía honor a su nombre, es decir, no cumplía realmente su función.

Por lo pronto, quienes lo deseen pueden entrar a la caja de arena donde voy trabajando haciendo

click aquí

¿Cómo usarla?
Hagan click en el mapa para crear marcadores, a partir del segundo marcador la distancia es calculada y visualizada en un elemento de la página debajo del mapa.
Los marcadores son arrastrables, y la distancia es actualizada automáticamente al igual que el trayecto recorrido.
Además, he colocado un botón que dice "CLEAN" el cual limpia los marcadores colocados, o si hacen click derecho sobre cualquiera de los marcadores, se eliminará el último.

Espero les guste cómo va quedando la nueva DistanceWidget y sería agradable encontrar comentarios alrespecto.

Saludos desde Colombia.

Está en desarrollo aún pero, pueden ver en qué va.
Espero dedicarle algo más de tiempo este fin de semana.

Bueno la cosa es así:

Tu eres un turista o estás aburrido y quisieras saber qué lugares o actividades hay alrededor del lugar en qué resides, el hotel en el cual te hospedas o la casa de tus tíos mientras tus padres están en su segunda luna de miel en HAWAI jajaja

Hay un marcador central que eres tú, un círculo alrededor de ti que determina un área de búsqueda y un marcador "cambiador de tamaño" el cual tiene como función ampliar o disminuir el área de búsqueda según lo arrastres.

El widget recibirá un arreglo de los de la API (MVCArray) que contiene los marcadores de los lugares y/o actividades de interés, y visualizará solamente aquellos que estén dentro del área de búsqueda, los que caigan fuera serán ocultados.

Divertido y útil, ¿cierto?

¿Quieres ver la caja de arena donde voy trabajando?, click aquí

Nota: Si alguien quisiera colaborar con los iconos de los marcadores, una personita para el maracador central o algo, se le agradecería su contribución además que aparecería en los comentarios de la widget por supuesto. Los iconos son de 20x20 píxeles.

Quedo atento a sus comentarios.

Saludos desde COLOMBIA

Ok, el nuevo What's Around Me Widget ya hace lo que debe hacer

e incluso, no solamente recibe arreglos comunes y corrientes sino también los arreglos de la API (MVCArray), es decir, funciona con cualquiera de los dos.

El arreglo se le pasa como parámetro al método "contains" de la widget y listo.