web-dev-qa-db-fra.com

GMaps V3 InfoWindow - désactive le bouton "x" de fermeture

D'après ce que je vois, dans la v2 de l'API GMaps, il y avait une propriété "boutons" de l'objet InfoWindow que l'on pouvait définir de manière à ce que InfoWindow n'ait pas de bouton de fermeture:

marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});

Ce qui précède ne s'applique toutefois pas à la v3. Est-ce que quelqu'un connaît un moyen de le faire? J'ai lu un article sur un utilitaire qui remplace InfoWindow et qui s'appelle InfoBox , mais il n'a pas été développé depuis 2 ans. J'utilise actuellement la dernière version 3.13 de l'API Gmaps v3.

Une solution de contournement avec jQuery est acceptable s'il n'y a pas de meilleure solution.

jquerygoogle-mapsgoogle-maps-api-3
39
ddinchev

Mettre à jour

L'affichage d'un <div> au-dessus d'une carte Google est simple:

exemple css 

div.info {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 100px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;
}

Un info class <div> quelque part dans le balisage:

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>

Toujours agréable d'avoir une brève référence à la div:

var info = document.getElementById('myinfo');

La partie la plus délicate, montrant le <div>, comment et quand - je viens d’affecter un gestionnaire de clics à la carte (après sa création) et d’afficher l’information <div> à l’emplacement de la souris XY dans la carte:

google.maps.event.addListener(map, 'click', function(args) {
  var x=args.pixel.x; //we clicked here
  var y=args.pixel.y;

  info.style.left=x+'px';
  info.style.top=y+'px';
  info.style.display='block';
});

Ce que vous gagnez avec ceci, c'est que l'info <div> vous suit sur la carte, chaque fois que vous cliquez. 

enter image description here

  • Vous aurez besoin de plus de style pour répondre à vos besoins, par exemple pour "ressembler à une info-boîte", mais cela devrait être facile à trouver, je ne suis pas bibliothécaire :)
  • Et peut-être plus tard quelque chose pour fermer l'info, mais que vous ne vouliez pas en premier lieu :)

Réponse originale

Tu ne peux pas! Il n'y a aucun moyen de faire cela dans la v3.13 actuelle Options InfoWindow . 

Une solution de contournement consiste à désactiver l'image contenant le X:

<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
</style>

enter image description here

Mais c'est de pas du tout conseillé!

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png est exactement ce que l'infowindow fait référence à aujourd'hui. Demain, ou dans un mois, ou dans une année, cette image de référence a bien sûr changé. Comme vous pouvez le voir si vous recherchez des "solutions" similaires, faites au fil du temps - comme this . Ils sont tous brisés aujourd'hui, par exemple, l'effort n'a pas de sens.

Je pense qu'il est extrêmement logique que Google "refuse" de suivre la demande de dissimulation du bouton de fermeture. Si vous n'avez pas besoin d'un bouton de fermeture, de quoi avez-vous besoin d'une InfoWindow? Lorsque vous êtes mieux lotis, il vous suffit d'afficher un <div> sur la carte. 

19
davidkonrad

Vous pouvez également le faire via le css.

.gm-style-iw + div {display: none;}

éditer janvier 2019
comme @antmeehan a déclaré dans le commentaire, 

Google a modifié le code HTML et le bouton de fermeture est désormais un élément du bouton

Donc, le code CSS pour cacher le bouton "x" est maintenant:

.gm-style-iw + button {display: none;}
35
Louis Moore

si vous utilisez jquery, ajoutez simplement ceci

$(".gm-style-iw").next("div").hide();
16
Tushar Gaurav

Pour prolonger la réponse de Louis Moore , vous pouvez également centrer le texte après avoir supprimé le bouton de fermeture:

.gm-style-iw + div {display: none;}
.gm-style-iw {text-align:center;}

Sans centrage:

Avec centrage:

14
phi

Merci Tushar, mais vous devez également mettre ce code dans le gestionnaire d'événements 

google.maps.event.addListener(infowindow, 'domready', function(){
    $(".gm-style-iw").next("div").hide();
});

12
CarryLight

J'ai utilisé la réponse donnée par Tushar Gaurav, mais l'ai élargie un peu ...

$(".gm-style-iw:contains(" + infoText + ")").css("left", function() {
    return ($(this).parent().width() - $(this).width()) / 2;
}).next("div").remove();

Cela supprimera le X d'une infowindow avec le texte dans infoText, puis actualisera le texte car il est décentré après avoir supprimé le bouton de fermeture.

Ajoutons simplement ceci à toute personne qui tombe comme moi sur cette page.

7
Archer
closeBoxURL: ""

comme indiqué précédemment ne s'applique pas pour InfoWIndow . Ceci est une option sur la InfoBox . 

Vous pouvez par exemple utiliser cette solution de contournement CSS pour supprimer le X et le bouton cliquable environnant:

.gm-style-iw + div {
  display: none;
}

Et comme davidkonrad a dit. Ceci est une solution de contournement sur le code tel qu'il est aujourd'hui. Ce sera probablement changé.

6
tmn

Mon propre chemin (sans Jquery) et avec réaligner au centre de l'infoWindow:

var content = document.querySelector('.gm-style-iw');
content.parentNode.removeChild(content.nextElementSibling);
content.style.setProperty('width', 'auto', 'important');
content.style.setProperty('right', content.style.left, 'important');
content.style.setProperty('text-align', 'center', 'important');
4
alex

Ma solution:

            google.maps.event.addListener(marker, 'click', function() {

            var wnd = new google.maps.InfoWindow({
                content: "<table id='viewObject' >...</table>"
            });

            google.maps.event.addListener(wnd, 'domready', function(){

                $("#viewObject").parent().parent().next().remove();
            });

            wnd.open(map, marker);
        });
2
nim

Vous pouvez utiliser ceci. Cela ne masquera pas d’autres images telles que le contrôle de zoom, le contrôle de panoramique, etc .

google.maps.event.addListener(infoWindow, 'domready', function () {

      document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none";
});
1
Bipool

.gm-style-iw + button {display: none! important;}

0
user3760553

Utiliser la méthode des archers que je dois faire

$(".gm-style-iw").css("left", function() { //remove close and recenter
  return ($(this).parent().width() - $(this).find(">:first-child").width()) / 2;
}).next("div").remove();
0
zevero

Je ne trouve pas la bonne réponse ici, alors je l'ai corrigée moi-même Cela fonctionnera bien.

google.maps.event.addListener(infowindow, 'domready', function(){
      $(".gm-style-iw").parent().find("button").removeAttr("style").hide();
});
0
Michael Lee
google.maps.event.addListener(infowindow, 'domready', function() {

    var iwOuter = jQuery('.gm-style-iw');

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.remove()
});

Comme il n'y a pas d'option pour masquer ce paramètre par API, vous devez rechercher l'élément en ciblant la fenêtre de contenu et le supprimer.

J'espère que cela t'aides :)

0
dipak_pusti

Je ne pouvais obtenir aucune des réponses $(".gm-style-iw").next("div").hide(); au travail même en appelant le code après le chargement du DOM, car il y avait un délai entre le code appelé et la fenêtre d'information en cours de création. Ce que j'ai fait est de créer un intervalle qui s'exécute jusqu'à ce qu'il trouve la fenêtre d'information et supprime l'élément "X". S'il y a un meilleur moyen s'il vous plaît dites-moi.

var removeCloseButton = setInterval(
    function()
    {
        if ($(".gm-style-iw").length)
        {
            $(".gm-style-iw").next("div").remove();
            clearInterval(removeCloseButton);
        }
    },
    10
);
0
Gavin