Google Maps: Comment créer un InfoWindow personnalisé?

EDIT Après une certaine chasse, 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 ce InfoBubble que j'ai utilisé sur Dive Seven, un site Web pour l'enregistrement en ligne de plongée sous-marine . Cela ressemble à ceci:

Google fournit une démo qui montre comment implémenter une fenêtre d'informations personnalisée. Cela nécessite une bonne quantité de code, mais il semble être plutôt simple.

Il y a quelques exemples supplémentaires ici . Ils ne sont vraiment pas aussi sympa que l'exemple dans votre capture d'écran.

Vous pouvez modifier tout 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 raccourci dans l'InfoWindow réel. 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 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 configurer 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 google.maps.InfoWindow , mais elle prend en charge plusieurs propriétés supplémentaires pour un style avancé. Un InfoBox peut également être utilisé comme une étiquette de carte. Une InfoBox déclenche également les mêmes événements qu'un google.maps.InfoWindow .

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

Ensuite, utilisez ceci un exmaple: http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/examples.html

Le style de l'infowindow est assez simple avec le javascript de vanilla. J'ai utilisé certaines informations de ce fil lors de l'écriture. J'ai également pris en compte les problèmes possibles avec des versions antérieures, c'est-à-dire (bien que je ne les ai pas testées 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 d'un 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 éléments corrects à manipuler avec une simple feuille de style externe.

Il y a quelques morceaux supplémentaires (qui ne sont pas strictement nécessaires) qui gèrent les choses comme donner un crochet dans le div avec l'image de la fenêtre d'info proche.

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

Si vous voulez le changer à jquery (pas d'idée pourquoi vous le feriez), cela devrait être assez simple.

Je ne suis généralement pas un développeur javascript, donc toute réflexion, commentaires, critiques bienvenues 🙂

Un 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 référer pour le lien JS Fiddle et l'exemple complet.

Je ne suis pas sûr de savoir 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 l'inforwindow par défaut du style. Après avoir utilisé le code HTML pour l'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 pure solution CSS basée sur l'exemple infowindow actuel 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 s'il aide: P

Vous pouvez même ajouter votre propre classe css sur le conteneur contextuel / toile ou comment voulez-vous. Les cartes Google 3.7 actuelles ont des fenêtres contextuelles composées par un élément de canevas qui inclut le conteneur div. Pop-up dans le code. Ainsi, à googlemaps 3.7 Vous pouvez accéder au processus de rendu par événement popready 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, alors si vous voulez que cela fonctionne, suivez ceci .

Vérifiez la dernière référence InfoWindow pour les événements et plus encore …

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

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

Je ne peux pas accepter de crédit pour cela, je l'ai fourré à partir d'un autre utilisateur de code-code pour réparer la dépendance Google Maps pour effectivement charger

Notez l'appel à:

 InfoWindow() // constructor