HTML
// Ejemplo de contenedor del mapa con data-attribute
<div id="map-sample-2A" data-gmapz="gz-sample-2A" class="map"><p>map goes here</p></div>
// Botones vinculados
<a href="#" class="btn btn-primary" data-gmapz-target="gz-sample-2A" data-gmapz-show-group='[1,289,38,3,6,7,9,10]' data-gmapz-hide-rest="true">Mostrar grupo A</a>
<a href="#" class="btn btn-primary" data-gmapz-target="gz-sample-2A" data-gmapz-show-group='[2,"garajonay","teide",12]'>Mostrar grupo B</a>
<a href="#" class="btn btn-primary" data-gmapz-target="gz-sample-2A" data-gmapz-show-group='[5,"picos_de_europa"]'>Mostrar grupo C</a>
<a href="#" class="btn btn-primary" data-gmapz-target="gz-sample-2A" data-gmapz-center-idx="teide" data-gmapz-zoom="12" >Centrar vista en marcador</a>
<a href="#" class="btn btn-primary" data-gmapz-target="gz-sample-2A" data-gmapz-show-all >Mostrar todos</a>
// Select con data-attributes
<select name="" id="select-sample-2A" data-gmapz-target="gz-sample-2A">
<option value="0">Seleccionar grupo de marcadores</option>
<option data-gmapz-show-group='[1,289,38,3,6,7,9,10]'>Mostrar grupo A</option>
<option data-gmapz-show-group='[2,"garajonay","teide",12]' data-gmapz-hide-rest="true">Mostrar grupo B</option>
<option data-gmapz-show-group='[5,"picos_de_europa"]'>Mostrar grupo B</option>
<option data-gmapz-center-idx="teide" data-gmapz-zoom="12">Centrar vista en marcador</option>
<option data-gmapz-show-all>Mostrar todos</option>
</select>
// Enlaces con evento click de JQuery
<a href="#" class="btn btn-danger" id="js-add-markers-5">Anadir nuevos marcadores</a>
<a href="#" class="btn btn-danger" id="js-delete-markers-5">Borrar marcadores</a>
<a href="#" class="btn btn-danger" id="js-update-marker-5">Actualizar un narcador</a>
Javascript
Las funcionalidades de añadir y eliminar marcadores se vinculan empleando Javascript
. Para que se vinculen automáticamente los botones con el data-attribute data-gmapz-target="..."
con el mapa correspondiente debemos llamar a la funcion de JS GMapz.attachActionButtons();
// Start gmapz with default options
var map_sample_2A = new GMapz.map(
$('[data-gmapz="gz-sample-2A"]')
);
// onReady add locations and fit bounds
map_sample_2A.onReady = function() {
this.addLocations(spain_locs).fitBounds();
};
// Events attached to buttons
$('#js-add-markers-2A').on('click', function(e) {
e.preventDefault();
map_sample_2A.addLocations(morocco);
});
$('#js-delete-markers-2A').on('click', function(e) {
e.preventDefault();
map_sample_2A.deleteMarkers(['FEZ','ORAN',12]);
});
$('#js-update-marker-2A').on('click', function(e) {
e.preventDefault();
map_sample_2A.addLocations(update);
});
// Automatically attach button with data-gmapz attribute
GMapz.attachActionButtons();