Google map : Cacher un marqueur spécifique

Par Neal, il y a 10 ans

Javascript

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.

18 réponses

Lartak, il y a 10 ans

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.

Neal, il y a 10 ans

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.

Lartak, il y a 10 ans

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.

Neal, il y a 10 ans

Oui, mais là n'est pas question. Je n'arrive pas à masquer le marqueur qu'il décoche.

Lartak, il y a 10 ans

Pour commencer, si tu nous disait par exemple quelle API de Google Map tu utilises, peut-être que nous pourrions t'aider efficacement.

Neal, il y a 10 ans

Eh bien, la V3

Lartak, il y a 10 ans

Je ne t'ai pas demandé quelle version, mais quelle API de Google Map.

Neal, il y a 10 ans

l'API Javascript, j'utilise. Désolé.

Vallyan, il y a 10 ans

Les markers sont des objets, ils ont la méthode setVisible normalement.

marker.setVisible(false);

A appliquer sur ton marker d'intéret

Neal, il y a 10 ans

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à.

Vallyan, il y a 10 ans

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 tes markers ? A partir de quel genre d'info ?

  • Comment créés-tu les checkbox correspondantes ?

    Tu as un peu de code a nous montrer ?

Neal, il y a 10 ans

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

Vallyan, il y a 10 ans

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") ); } }); }) });
Neal, il y a 10 ans

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 !

Vallyan, il y a 10 ans

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

Neal, il y a 10 ans

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 ?

Vallyan, il y a 10 ans

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 ^^

Neal, il y a 10 ans

Ok, c'est plus clair pour moi.
Merci !