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

La fenêtre InfoWindow 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?

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 cette InfoBubble que j'ai utilisée sur Dive Seven, un site Web pour l'enregistrement de plongée en ligne . Cela ressemble à ceci:

Il y a quelques autres exemples ici . Cependant, ils ne sont certainement pas aussi beaux que l'exemple de votre capture d'écran.

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

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

Ici, l'élément <p> agira comme un crochet dans la véritable InfoWindow. Une fois que le domready se déclenche, l'élément deviendra actif et accessible en utilisant 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 ...

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

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

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

Le style de l'infowindow est assez simple avec javascript vanille. J'ai utilisé certaines des informations de ce fil lors de l'écriture de ceci. J'ai également pris en compte les problèmes possibles avec les versions antérieures de ie (même si je ne l'ai pas testé avec elles).

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 de code énorme), en utilisant un div avec un identifiant pour contenir le contenu. Cela donne un crochet 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 gèrent des choses comme donner un crochet dans le div avec l'image de la fenêtre d'information de fermeture.

La boucle finale masque tous les morceaux 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 la flèche par un png de votre choix devrait également être assez simple.

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

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

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é à y parvenir. Vous pouvez le consulter pour le lien fonctionnel JS Fiddle et l'exemple complet.

Je ne sais pas comment FWIX.com le fait spécifiquement, mais je parierais qu'ils utilisent des superpositions personnalisées .

Vous pouvez utiliser le code ci-dessous pour supprimer le style par défaut dans la fenêtre. Une fois que vous pouvez utiliser le code HTML pour inforwindow:

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
});

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'informations. N'oubliez pas de voter si cela vous aide: P

Vous pouvez même ajouter votre propre classe css sur le conteneur / canevas contextuel ou comment voulez-vous. La version actuelle de Google Maps 3.7 a des fenêtres contextuelles stylisées par un élément canvas qui ajoute le conteneur div popup dans le code. Donc, à 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 dans IE8 - donc si vous voulez le faire fonctionner, suivez ceci .

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

J'ai trouvé cela plus propre dans certains cas.

Je pense que la meilleure réponse que j'ai trouvée est ici: https://codepen.io/sentrathis96/pen/yJPZGx

Je ne peux pas m'en attribuer le mérite, j'ai fait une fourchette à un autre utilisateur de codepen pour corriger la dépendance de google maps pour charger réellement

Prenez note de l'appel à:

InfoWindow() // constructor