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. No olvides echarle un ojo a cómo se configuran los pins del mapa y cual es el formato de los marcadores / localizaciones.
map goes here
Solo se necesita crear una instancia de GMapz indicando las coordenadas de center y opcionalmente unos límites (bounds) con las esquinas de la zona de visualización en un array con la forma: [nortwest_lat, nortwest_lng, southeast_lat, southwest_lng].
A continuación pueden verse varias opciones de inicialización de GMapz.
map_sample_1A = new GMapz.map(
$('#map-sample-1A'),
{ // Standard Google Maps options
scrollwheel: true, // Default
scaleControl: true, // Default
center: [48.860, 2.340],
bounds: [49.7198, 4.1335, 47.9851, 0.5464],
// zoom: 9 You can set `zoom` instead of bounds
// 'ROADMAP' / 'SATELLITE' / 'HYBRID' / 'TERRAIN'
mapTypeId: 'ROADMAP', // Default
}
);map goes here
GMapz también soporta diferentes estilos de color como los generados por Snazzy Maps, deben pasarse en la inicialización del mapa con el resto de parámetros.
// Map sample 1B
map_sample_1B = new GMapz.map(
$('#map-sample-1B'),
{ // Google Maps options
center: [48.860, 2.340],
zoom: 9,
styles: [{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
}
);map goes here
Si solo se muestra una localización hay un método para ajustar el zoom automático, también puede desactivarse completamente pasándole el valor false
map_sample_1C = new GMapz.map(
$('#map-sample-1C'),
{
// Empty Google Maps options
},
// One single marker / location
{
bolera_de_mieres: {
lat: 43.239175,
lng: -5.779116,
iw: 'Puede que los mejores callos del mundo ;)'
}
}
);
map_sample_1C.onReady = function(){
// this = google.maps instance
// this.setSingleMarkerZoom(false); // Disable singleMarkerZoom
this.setSingleMarkerZoom(16); // Set custom value
this.fitBounds();
};A la derecha puede verse la estructura de este objeto JSON. Los marcadores están identificados por una key esta puede ser numérica o alfanumérica, pero es importante que se ÚNICA. Échale un ojo al fichero GMapz.locations.js en el repositorio.
La opción iw: determina el contenido del infowindow que se abre cuando pulsamos en uno de los marcadores. Y el pin: el puntero que se le asignará a este marcador, si no asignamos ninguno se empleará el pin definido como 'default' en el fichero gmapz.pins.js.
// Group of markers
var morocco = {
'FEZ' : { // Key must be unique!
pin: 'green',
lat: 34.033884,
lng: -5.000206,
// Contenido para el `infowindow` (opcional)
// Se abre cuando se pulsa el marcador
iw: 'Fez en Marruecos',
// El marcador es `draggable` (opcional)
draggable: true,
// El marcador inicialmente estará oculto (opcional)
hidden: true
},
168: { // Numeric marker
// ...map goes here
Para añadir los marcadores debemos pasar un objeto JSON a la instancia de GMapz en su momento de creación o también podemos asignárselos depués de que esté listo empleando el método addLocations.
Cuando el mapa esté listo (onReady) podemos llamar al método .fitBounds(), si no le pasamos ningún parámetro ajustará la vista a todos los marcadores visibles en el mapa.
// Map sample 1E
map_sample_1C = new GMapz.map(
$('#map-sample-1E'),
{}, // Empty options
france_cities // gmapz.locations.js
);
map_sample_1E.onReady = function(){
// También podríamos añadir los marcadores después de crear
// el mapa haciendo:
// this.addLocations(france_cities);
this.fitBounds();
}map goes here
Haz zoom sobre este mapa para ver la agrupación de marcadores...
Para agrupar los marcadores empleamos markerclusterer.js una vez el mapa de GMapz está inicializado.
El procedimiento es bastante sencillo, preparamos las opciones de markerclusterer, inicializamos nuestro mapa normalmente, y en el onReady() de nuestro mapa pasamos los marcadores a markerclusterer que se encargará automáticamente de su agrupación según el nivel de zoom que hayamos definido.
ATENCIÓN: markercluster emplea un array de marcadores, así que tenemos que convertir el objeto que se usa dentro de gmap (ver código del ejemplo a la derecha).
var map_sample_1F_options = {
// 'ROADMAP' / 'SATELLITE' / 'HYBRID' / 'TERRAIN'... caps
mapTypeId: 'ROADMAP',
center: [48, 2],
zoom: 5
};
map_sample_1F = new GMapz.map(
$('#map-sample-1F'),
map_sample_1D_options,
france_cities
);
// https://github.com/googlemaps/js-marker-clusterer
var marker_cluster_style = [{
textColor: 'white',
url: 'img/gmapz/pin-cluster.png',
height: 48,
width: 48,
textSize: '17',
backgroundPosition: '0 0'
// anchorIcon: [-24.0, -48.0] // This propoerty its not supported actually
}];
map_sample_1F.onReady = function() {
// Conviert el objeto de marcadores en un array
markers_array = $.map(this.markers, function(val, idx){
return [val];
});
this.marker_cluster = new MarkerClusterer(
this.map,
markers_array, {
gridSize: 100,
maxZoom: 15,
styles: marker_cluster_style
}
);
};