GMapz simplifica creación de mapas con Google Maps API V3, es responsive, soporta múltiples instancias en la misma página, infowindows personalizados y opciones diferentes para cada instancia del mapa. Además es posible crear botones de forma rápida y sencilla que interacciones con los mapas a través de data-attributes.
Si tu mapa va a tener muchas visualizaciones (+ de 25.000 al día) es obligatorio que crees una API Key para Google Maps (es una buena práctica aunque no creas que vas a llegar al límite de visitas). Para crearla dirígete a Google Maps API, el servicio que debes seleccionar es Google Maps JavaScript API, clave de navegador.
IMPORTANTE: Asegúrate de configurar en que dominios / IPs se puede emplear la clave que generes, para evitar que otras personas puedan usarla en sus desarrollos.
Configurar tu Clave de API en GMpaz es muy sencillo, basta con que la asignes como se vé a continuación antes de crear ningún mapa
// APIKEY GMapz.APIKEY = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'; map_sample_1A = new GMapz.map( ...
GMapz está dividido en varias librerías lo que permite que se se incluyan únicamente las partes de la librería necesarias para la funcionalidad que se necesita.
Para un proyecto con la funcionalidad básica necesitaremos incluir:
JQuery (1.9.1+)
GMapz.js (el core de la librería y funciones comunes)
GMapz.pins.js (definición de los pins)
GMapz.maps.js (funcionalidades necesarias para la creación de mapas)
Si necesitamos un input para emplear las funcionalidades de autocompletado y búsqueda de localizaciones de Google (ver ejemplos de geolocalización), necesitaremos añadir además:
GMapz.autocomplete.js
Algunas funcionalidades extendidas de GMapz requireren de librerías de terceros que deberemos incluír en caso de necesitar dichas funcionalidades.
Para la funcionalidad del mapa responsive es necesario incluir la librería MQBE.js (https://github.com/carloscabo/MQBE). Puedes ver un ejemplo de su funcionamiento en la sección correspondiente de esta ayuda ( GMapz responsive).
Para agrupar marcadores automáticamente cuando se hace zoom en la página se emplea la librería MarkerClusterer.js. Información y ejemplos en: https://github.com/googlemaps/js-marker-clusterer.
Para crear infowindows personalizados se emplea la librería infobox.js. Información y ejemplos en: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html.
A continuación dispones de un ejemplo de el orden recomendado para incluir las liberías en tu proyecto
<!-- JQuery --> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <!-- Librerías de terceros, opcionales --> <script src="js/lib/mqbe.min.js"></script> <script src="js/lib/markerclusterer.js"></script> <script src="js/lib/infobox.modified.js"></script> <!-- GMapz y sus módulos --> <script src="js/gmapz.js"></script> <script src="js/gmapz.pins.js"></script> <!-- JSON de "pins" para los mapas --> <script src="js/gmapz.map.js"></script> <script src="js/gmapz.autocomplete.js"></script> <script src="js/gmapz.locations.js"></script> <!-- JSON de localizaciones --> <!-- Ready de tu aplicación --> <script src="js/ready.js"></script>
Cuando hablamos de "pins" nos referimos a las imagenes que emplea Google Maps para señalar las localicaciones en los mapas. Para personalizar estos gráficos en tu aplicación basta con definir un fichero JSON con sus nombres y propiedades que después podrás emplear en el correspondiente fichero de ubicaciones / posiciones / coordenadas (ver a la derecha).
Siempre debes definir los pins ANTES de inicializar ningún mapa, en caso contrario se emplearán los "pins" por defecto de google maps.
Puedes echar un ojo al fichero gmapz.pins.js que se ha empleado en todas las demos de esta documentación, empléalo como base para personalizar los pins de tu proyecto. Los pins deben tener una clave única que permita referenciarlos más tarde en el fichero de coordenadas.
1. El pin 'default' que es el pin que se usará por defecto cuando no se indique ningún otro.
2. El pin user_location que es el indica la posición del usuario en el mapa cuando se usan las funciones de geolocalización, o las funcionalidades de encontrar la ubicación más cercana a la del usuario.
// Pins must be defined BEFORE map initialization
var base_path = 'img/gmapz/';
GMapz.pins = {
'default': { // IE8 Reserved word, allways must be QUOTED!
pin: {
img: base_path + 'pin.png',
size: [48.0, 48.0],
anchor: [24.0, 48.0]
}
},
user_location: { // Used for user location
pin: {
img: base_path + 'pin-user-location.png',
size: [48.0, 48.0],
anchor: [24.0, 48.0]
}
},
orange: {
pin: {
img: base_path + 'pin-orange.png',
size: [48.0, 48.0],
anchor: [24.0, 48.0]
}
},
blue: {
pin: {
img: base_path + 'pin-blue.png',
size: [48.0, 48.0],
anchor: [24.0, 48.0]
}
},
green: {
pin: {
img: base_path + 'pin-green.png',
size: [48.0, 48.0],
anchor: [24.0, 48.0]
}
}
};Este fichero define las coordenadas de cada marcador en el mapa (en formato latitud, longitud), así como el pin que se dibujará, y el contenido del infowindow (la ventanita que se muestra cuando pulsamos sobre un marcador).
Cada marcador comienza con una clave / key / index que debe ser única, esta clave puede ser numérica o alfanumérica y solo debe emplear caracteres dentro del rango: [a-zA-z0-9_].
Los marcadores pueden tener dos propiedades adicionales: draggable, que indica que usuario podrá mover el marcador y visible que si es false hará que el marcador se añada al mapa oculto inicialmente.
Es útil agrupar los marcadores en diferentes objetos, así podremos tener los marcadores organizados.
// Grupo de en Marruecos
var morocco = {
'FEZ' : { // Clave única
pin: 'green', // Pin que se dibujará
lat: 34.0338,
lng: -5.0002,
iw: 'Fez en Marruecos', // Infowindow
draggable: true, // Por defecto es false
visible: false // Por defecto es true
},
'ORAN' : {
lat: 35.6980,
lng: -0.6329
},
12: { // Clave numérica
pin: 'blue',
lat: 43.257206,
lng: -2.923763
}
};
// France main cities
var france_cities = {
paris: {
lat: 48.8601,
lng: 2.3402,
iw: 'Paris, population: 2107700'
},
marseille: {
lat: 43.3103,
lng: 5.3704,
iw: 'Marseille, population: 826300'
},
lyon: {
lat: 45.7605,
lng: 4.8306,
iw: 'Lyon, population: 443600'
},
//...