Métodos
A continuación dispones de los ejemplos más habituales para configurar un mapa con GMapz, y diferentes opciones de configuración. También dispones de un ejemplo que incorpora agrupación automática de markers.
A continuación dispones de los ejemplos más habituales para configurar un mapa con GMapz, y diferentes opciones de configuración. También dispones de un ejemplo que incorpora agrupación automática de markers.
GMapz.debug = true;
Activa / desactiva los mensajes de info / error / warning en la consola.
GMapz.APIKEY = 'XXXXXXXXXXXXX';
Propiedad que debe almacenar la API Key de Google Maps for JS.
GMapz.requestAPI( callback_function );
Incrusta en la página la API de google.maps y cuando está lista llama a callback_function, por defecto GMapz.onApiReady.
GMapz.onGoogleMapsReady
Método que se ejecuta cuando la API de google.maps está disponible, puede emplearse para ejecutar código propio (ver ejemplo a la derecha).
GMapz.onGoogleMapsReady = function() {
// Yout custom code here
}GMapz.getOppositeCorner( center_lat, center_lng, northeast_lat, northeast_lat );
Devuelve la esquina opuesta de un cuadrado imaginario cuyo centro es center_lat, center_lng, y una de sus esquinas northeast_lat, northeast_lat. Devuelve un objeto LatLng de google.maps.
GMapz.serializeBounds( google_maps_bounds_obj );
Pasándole un objeto bounds de google.maps devuelve un string serializado con la forma: 'sw_lat, sw_lng, ne_lat, ne_lng'.
GMapz.attachActionButtons();
Busca en la página los elementos con el data-attribute data-gmapz..., y les asigna la funcionalidad correspondiente.
var my_map = new GMpaz.map( $(element), options );
Crear una nueva instancia de GMapz.map, debemos proporcionar un selector de JQuery, las opciones de configuración de google.maps y opcionalmente un objeto con la lista de ubicaciones.
Si necesitamos acceder directamente al objeto de google.maps podemos hacerlo a través de my_map.map
var my_map = new GMapz.map(
$('#map-sample-1'), // JQuery selector
google_maps_options,
locations_object // Optional
);my_map.onReady();
Se ejecuta una vez el mapa está inicializado, y sus métodos están diponibles.
CUIDADO: Que el objeto esté creado no quiere decir que ya esté pintado, los métodos de google maps relativos a la visualización pueden no estár diponibles, por ejemplo my_map.map.getZoom();
my_map.onReady = function(){
// this = google.maps instance
this.addLocations( locations_obj );
}my_map.onDraw();
Se ejecuta una vez el mapa está dibujado. En este momento todas las propiedades del mapa deberían estar disponibles y deberían poder actualizarse.
my_map.onDraw = function(){
// this = google.maps instance
}my_map.addLocations( locations_obj );
Añade las ubicaciones al mapa y les asigna el pin correspondiente. Consulta el formato de localizaciones y pins.
Si necesitas acceder a los marcadores puede hacerlo a traves de my_map.markers, los infowindows se encuentran en my_map.iws.
my_map.deleteMarkers( marker_group_array );
Elimina las localizaciones y sus infowindows de los índice indicados en marker_group_array.
my_map.deleteAllMarkers();
Elimina todas las localizaciones y sus infowindows del mapa actual.
my_map.setMarkerVisibility( idx, visible );
Oculta / muestra el marker con el identificador idx, pasando true como parámetro lo muestra, pasando false lo oculta.
my_map.setAllMarkersVisibility( visible );
Oculta / muestra todos los markera del mapa, pasando true como parámetro los muestra, pasando false los oculta.
my_map.showMarkerGroup( marker_group_array, hide_rest );
Muestra el grupo de marcadores en marker_group_array, automáticamente centra el mapa en el grupo. Si se pasa true en el parámetro hide_rest ocultará todos los marker que no estén el el grupo.
my_map.centerToMarker( marker_idx, zoom );
Centra el mapa en el marcador con la key marker_idx, el parámetro zoom es opcional.
my_map.findNearestMarkerToPos( lat, lng );
Devuelve el índice del marcador más cercano a una latitud / lungitud dada.
my_map.setZoom( zoom );
Cambia el zoom del mapa.
my_map.getZoom();
Devuelve el zoom actual.
my_map.centerTo( lat, lng, zoom );
Centra el mapa en las coordenadas lat, lng, el parámetro zoom es opcional.
my_map.setSingleMarkerZoom( target, threshold );
Cuando el mapa tiene un solo puntero y hacemos zoom sobre él, Google Maps aplica el zoom máximo, para fijar un zoom máximo propio empleamos este método. target fija el zoom deseado, y threshold el umbral a partir del cual se aplica (por defecto es 20). Si querenos desactivar completamente esta funcionalidad podemos hacerlo llamando a my_map.setSingleMarkerZoom( false );. Ver Sample 1C.
my_map.fitToPlace( place, zoom );
Ajusta la vista del mapa al place indicado aplicando el zoom correspondiente a la vista. El objeto place es del tipo devuelto por un gmapz.autocomplete. Consulta los ejemplos de autocomplete.
my_map.fitBounds( marker_group_array );
Ajusta la vista del mapa al grupo de marcadores en marker_group_array. Si no se pasa ningún marcador ajustará la vista de forma que se vean todos los marcadores disponibles en el mapa (que estén visibles).
my_map.openInfoWindow( marker_idx );
Muestra el infowindow correspondiente al key marker_idx.
my_map.closeInfoWindow( marker_idx );
Oculta el infowindow correspondiente al key marker_idx.
my_map.closeAllInfoWindows();
Oculta todos los infowindows del mapa.
my_map.defineInfoBox( infobox_obj );
Asocia un infobox personalizado al mapa. Consulta la sección infowindows.
my_map.addScrollControl();
Añade el control personalizado para bloquear / desbloquear el mapa y los eventos necesarios. Consulta la sección responsive.
my_map.lockScroll();
Bloquea el scroll y el zoom del mapa actual.
my_map.resumeScroll();
Desbloquea el scroll y el zoom del mapa actual.
my_map.onMarkerDragEnd();
Permite crear un evento personalizado para cuando el usuario arrastra (drag) un marcador del mapa. El marcador debe ser creado con la propiedad draggable: true;.
my_map.onMarkerDragEnd = function(marker){
// Marcador que el usuario ha arrastrado
console.log(marker);
}my_map.errorAddressNotFound();
Permite crear un error personalizado para cuando el usuario busca una dirección que no existe o es errónea (o Google no es capaz de localizar).
my_map.errorAddressNotFound = function(addr){
// Error de dirección no encontrada
console.warn("'"+addr+"' address not found!")
}my_map.convertLatLngToPixels( lat_lng_object );
Convierte un objeto de Google.maps de tipo LatLng a coordenadas en pixels en el mapa.
autocomplete_1 = new GMapz.autocomplete( $('.element'), settings );
Crear una nueva instancia de GMapz.autocomplete, debemos proporcionar un selector de JQuery, unos settings (opcional). Pueden consultarse los settings disponibles en la documentación de la API de Google de Autocomplete.
El objeto de google autocomplete se almacena en my_autoc.instance.
var ac_settings = {
types: ['geocode'],
offset: 3,
componentRestrictions: { 'country': 'es' }
};
var my_autoc = new GMapz.autocomplete(
$('#my-autocomplete'), // JQuery selector
ac_settings
);my_map.onReady();
Este evento es ejecutado cuando la instancia de autocomplete está lista..
my_autoc.onReady = function(){
// this -> GMapz autocomplete object
console.log('Autocomplete ready!');
};my_map.onChange();
Este evento es ejecutado cuando el usuario ha seleccionado una ubicación de las proporcionadas por autocomplete. En el código se muestra la manera típica de acceder al objeto de la localización proporcionado por autocomplete.
my_autoc.onChange = function(){
// this -> GMapz autocomplete object
// this.instance -> Google autocomplete object
var place = this.instance.getPlace();
console.log(place);
};