web-dev-qa-db-fra.com

Google Maps: Comment créer une InfoWindow personnalisée?

La fenêtre d'information Google Maps par défaut pour un marqueur de carte est très ronde. Comment créer une InfoWindow personnalisée avec des coins carrés?

javascripthtmlcssgoogle-maps
99
SarahBeale

EDIT Après quelques recherches, cela semble être la meilleure option:

https://github.com/googlemaps/js-info-bubble/blob/gh-pages/examples/example.html

Vous pouvez voir une version personnalisée de cet InfoBubble que j'ai utilisée sur Dive Seven, un site Web pour la journalisation en ligne de plongée . Cela ressemble à ceci:

Google fournissez une démo qui montre comment implémenter une fenêtre d’informations personnalisée. Cela nécessite une bonne quantité de code, mais semble être assez simple.

Il y a quelques exemples supplémentaires ici . Cependant, ils ne ressemblent certainement pas à l'exemple de votre capture d'écran.

83
Drew Noakes

Vous pouvez modifier toute l'InfoWindow en utilisant uniquement jquery ...

var popup = new google.maps.InfoWindow({
    content:'<p id="hook">Hello World!</p>'
});

Ici, l'élément <p> agira comme un crochet dans la fenêtre d'information actuelle. Une fois que le domready est activé, l'élément devient actif et accessible à l'aide de javascript/jquery, comme $('#hook').parent().parent().parent().parent().

Le code ci-dessous définit simplement une bordure de 2 pixels autour de l'InfoWindow.

google.maps.event.addListener(popup, 'domready', function() {
    var l = $('#hook').parent().parent().parent().siblings();
    for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
            $(l[i]).css('border-radius', '16px 16px 16px 16px');
            $(l[i]).css('border', '2px solid red');
        }
    }
});

Vous pouvez faire quelque chose comme définir une nouvelle classe CSS ou simplement ajouter un nouvel élément.

Jouez avec les éléments pour obtenir ce dont vous avez besoin ...

17
ATOzTOA

J'ai trouvé InfoBox parfait pour un style avancé.

Un InfoBox se comporte comme un google.maps.InfoWindow , mais il prend en charge plusieurs propriétés supplémentaires pour le style avancé. Une InfoBox peut également être utilisée comme étiquette de carte. Une InfoBox déclenche également les mêmes événements qu'un google.maps.InfoWindow .

Inclure http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js dans votre page

8
Maulik Bengali

Styliser l’infowindow est assez simple avec JavaScript javascript. J'ai utilisé certaines des informations de ce fil lors de l'écriture. J'ai également pris en compte les problèmes possibles avec les versions précédentes de ie (même si je ne les ai pas testées).

var infowindow = new google.maps.InfoWindow({
  content: '<div id="gm_content">'+contentString+'</div>'
});

google.maps.event.addListener(infowindow,'domready',function(){
  var el = document.getElementById('gm_content').parentNode.parentNode.parentNode;
  el.firstChild.setAttribute('class','closeInfoWindow');
  el.firstChild.setAttribute('title','Close Info Window');
  el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
  el.setAttribute('class','infoWindowContainer');
  for(var i=0; i<11; i++){
    el = (el.previousElementSibling)?el.previousElementSibling:el.previousSibling;
    el.style.display = 'none';
  }
});

Le code crée l’infowindow comme d’habitude (pas besoin de plugins, de superpositions personnalisées ou d’énormes codes), en utilisant un div avec un identifiant pour contenir le contenu. Cela donne un point d'ancrage dans le système que nous pouvons utiliser pour obtenir les bons éléments à manipuler avec une simple feuille de style externe.

Il y a quelques pièces supplémentaires (qui ne sont pas strictement nécessaires) qui traitent de choses comme donner un crochet à la div avec l'image de la fenêtre d'information proche en elle.

La dernière boucle cache toutes les pièces de la flèche du pointeur. J'en avais besoin moi-même, car je voulais avoir de la transparence sur l'infowindow et la flèche me gênait. Bien sûr, avec le crochet, changer le code pour remplacer l’image de flèche par un png de votre choix devrait aussi être assez simple.

Si vous voulez le changer en jquery (vous ne savez pas pourquoi), cela devrait être assez simple.

Je ne suis généralement pas un développeur javascript, donc toutes les pensées, commentaires et critiques sont les bienvenus :)

5
Rafe

Le morceau de code ci-dessous peut vous aider.

var infowindow = new google.maps.InfoWindow();
 google.maps.event.addListener(marker, 'mouseover', (function(marker) {
            return function() {
                var content = address;
                infowindow.setContent(content);
                infowindow.open(map, marker);
            }
          })(marker));

Voici un article < Comment localiser plusieurs adresses sur Google Maps avec un zoom parfait > qui m'a aidé à atteindre cet objectif. Vous pouvez le consulter pour utiliser JS Fiddle link et compléter l'exemple.

4
Ashish Gupta

Vous pouvez utiliser le code ci-dessous pour supprimer le style par défaut infowindow. Après que vous puissiez utiliser le code HTML pour infowindow:

var inforwindow = "<div style="border-radius: 50%"><img src='URL'></div>"; // show inforwindow image circle
marker.addListener('click', function() {
    $('.gm-style-iw').next().css({'height': '0px'}); //remove arrow bottom inforwindow
    $('.gm-style-iw').prev().html(''); //remove style default inforwindows
});
2
Teo Em

Je ne sais pas exactement comment FWIX.com le fait, mais je parie qu'ils utilisent Custom Overlays .

2
Scott Mitchell

Vous pouvez même ajouter votre propre classe CSS sur le conteneur/canevas contextuel ou comment vous le souhaitez. Google Maps 3.7 actuel a des popups stylés par élément de toile qui préfixent le conteneur popup div en code. Donc, dans googlemaps 3.7, vous pouvez entrer dans le processus de rendu par l'événement domready de popup comme ceci:

var popup = new google.maps.InfoWindow();
google.maps.event.addListener(popup, 'domready', function() {
  if (this.content && this.content.parentNode && this.content.parentNode.parentNode) {
    if (this.content.parentNode.parentNode.previousElementSibling) {
      this.content.parentNode.parentNode.previousElementSibling.className = 'my-custom-popup-container-css-classname';
    }
  }
});

element.previousElementSibling n'est pas présent à IE8 - donc si vous voulez le faire fonctionner, suivez ceci .

consultez la dernière référence à InfoWindow pour les événements et plus encore.

J'ai trouvé cela très propre dans certains cas.

1
palmic

Voici une solution CSS pure basée sur l'exemple actuel d'InfoWindow sur Google:

https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

#map *{
  overflow: visible;
}
#content{
  display: block;
  position: absolute;
  bottom: -8px;
  left: -20px;
  background-color: white;
  z-index: 10001;
}

C'est une solution rapide qui fonctionnera bien pour les petites fenêtres d'information. N'oubliez pas de voter si cela vous aide: P

1
Patch92

Je pense que la meilleure réponse que je trouve est ici: https://codepen.io/sentrathis96/pen/yJPZGx

Je ne peux pas en prendre le crédit, je l'ai fourni à un autre utilisateur de codepen pour corriger la dépendance de Google Maps à charger

Prenez note de l'appel à:

InfoWindow() // constructor
0
NomNomCameron