Bonjour, Je me heurte à un problème avec l'API de google map.
J'ai plusieurs marqueurs sur une map, à coté de celle-ci un bloc avec tous les marqueurs référencés et une checkbox.
J'aimerais que lorsque la personne décoche la checkbox d'un marqueur, celui-ci disparaisse de la map. Mon problème, est que je ne sais pas comment faire, j'ai essayé des fonctions comme disableMarker() ou clearMarkers(), etc....
Si vous avez un indice ou une solution sur qu'elle fonction utilisé, je suis preneur.
Merci.
Bon, c'est pas tellement compliqué:
D'abord tu ajoutes jQuery a ton truc:
/* Ligne 184 */<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
Ensuite tu ajoutes ta fonction jQuery. Elle execute ceci:
Lorsque tu click sur une checkbox, tu récupères l'adresse de l'icone de l'image juste avant.
Ensuite tu parcours ton tableau static_markers
Pour chaque marker qui a la meme icone, tu la fait disparaitre
Ca done:
/* Ligne 474 par exemple */
$(function() {
$( ":checkbox" ).click(function(){
var $icon = $(this).prev().attr("src");
var $cb = $(this);
static_markers.forEach(function(e, i, a){
if( e.icon == $icon ){
e.setVisible( $cb.is(":checked") );
}
});
})
});
j'ai essayé des fonctions comme disableMarker() ou clearMarkers()
Pourquoi utiliser des fonctions ?
Tu peux facilement le faire en jQuery.
Par contre, j'espère que tu fais une interaction avec la base de données pour faire la sauvegarde des modifications.
Sinon, lorsque tu vas rafraîchir la page, tous les markers avant la modification vont revenir.
J'ai justement essayer avec jQuery, mais je n'ai pas réussi à dire à google map de cacher ce marqueur la. Un hide() ? je sais pas.
Non, pas de sauvegarde de modifications, c'est juste une page html / css / js tout simple, juste quand l'utilisateur veut consulter la map, il peut cacher les marqueur qu'il ne veut pas voir.
C'est donc un site statique et non dynamique.
Par conséquent, sans authentification.
Dans ce cas là, dès qu'il rafraîchira la page, il devra à nouveau décocher les markers pour les masquer.
Pour commencer, si tu nous disait par exemple quelle API de Google Map tu utilises, peut-être que nous pourrions t'aider efficacement.
Les markers sont des objets, ils ont la méthode setVisible normalement.
marker.setVisible(false);
A appliquer sur ton marker d'intéret
Avec setVisible, en faisant une boucle j'arrive à cacher les marqueurs. C'est un tableau qui contient tout les marqueurs, dans mon cas : static_marker
Donc, il faudrait que je puisse passer dans le tableau le nom du marqueur à cacher. Sur chaque input, j'ai comme value le nom des marqueurs. Et là je bloque, je fais une boucle pour parcourir le tableau à la recherche du/des marqueur mais aucune action ne se passe, j'ai dans la console : "Cannot read property 'setVisible' of undefined" je sais que l'erreur est flagrante mais j'ai un trous là.
Si tu arrives a faire disparaitre tes marqueurs qui sont dans un array, c'est plutot une bonne nouvelle.
Comme tu le dis, la seule chose qu'il te reste a faire c'est de faire le lien correctement entre tes checkbox et ton array, pour qu'a partir d'une checkbox particulière tu connaisse l'index du marker correspondant dans ton array static_marker.
Ce qui n'est pas clair c'est:
Comment créés-tu les checkbox correspondantes ?
Tu as un peu de code a nous montrer ?
Alors, quelque infos :
Une grande partie du code ne vient pas de moi, il à été codé par Zslash, c'est un code open-source qu'il à créé pour qu'on puisse naviguer sur la map de GTA 5 comme sur google map, avec plusieurs marqueurs qui définit des positions comme : les stations service, les postes de police, etc...
Voici le code source de la page ou est la map :
http://www.mediafire.com/download/5wc8q4pnqqezefj/map.rar
Merci beaucoup Vallyan !
Cependant, je ne veux pas prendre le code et me barrer comme sa, j'aimerais le comprendre avant.
Je suis pas un expert en jquery.
$( ":checkbox" )
Signifie que tu sélectionne tout les input qui ont une checkbox ?
Pourrait-tu m'expliquer plus en détails le "forEach" ?
Merci !
Pas de problème, c'est très bien de vouloir comprendre !
$(function() {
$( ":checkbox" ).click(function(){ // Tu selectionnes toutes les checkbox de ton document, et ajoutes un listener a chacune qui va detecter le click
var $icon = $(this).prev().attr("src"); // Tu récupères la valeur de l'attribut src de l'image juste avant la checkbox clickée
var $cb = $(this); // Tu stockes dans une variable quelle checkbox a ete clickée
static_markers.forEach(function(e, i, a){ // Tu parcours ton tableau de markers et passe 3 arguments a la fonction: e = element courant (le marker en train d'etre considéré), i = index de ce marker dans ton tableau, a = tableau en entier. Ici: i et a ne servent pas
if( e.icon == $icon ){ // Tu vérifie que l'icone du marker courant est le meme qui celui de la checkbox
e.setVisible( $cb.is(":checked") ); // Si c'est le cas, tu set la visibilité en fonction du fait que la checkbox est cliquée ou pas
}
});
})
});
N'hésites pas s'il y a encore des zones de flou
Je comprend mieux, juste le forEach si i et a ne servent pas, pourquoi les avoir mis ? Sa doit être mis par défaut dans un forEach ?
Non, si tu ne te sers que de e tu peux ne mettre que e (attention, si tu as besoin de i, tu dois mettre e avant, et s'il te faut a, tu dois mettre les 3). J'aurais aussi bien pu les appeler kiki, toto et plicploc, ce qui compte c'est leur position dans les parenthèse.
Quant a savoir pourquoi je les ai mis ... un reflex a la con sans doute ^^