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

Question

Je viens de tomber sur http://fwix.com/

J'aime vraiment la façon dont ils créent l'InfoWindow (popup) lorsque vous cliquez sur un marqueur de carte parce que les angles sur leur InfoWindow ne sont pas aussi rond que le défaut InfoWindow coins.

Question: Comment font-ils créer leur InfoWindow donc la place, ce qui me plaît, parce que la valeur par défaut de Google Maps InfoWindow pour un marqueur de carte est très ronde.

Mise à JOUR:

Voici une capture d'écran de ce à quoi je parle:

Answer 1

EDIT Après une chasse autour de, ce qui semble être la meilleure option:

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

Vous pouvez voir une version spéciale de cette InfoBubble que j'ai utilisé sur de Plongée Sept, un site web en ligne pour la plongée sous-marine de journalisation. Il ressemble à ceci:

---

Google fournir une démo qui montre comment mettre en œuvre une coutume fenêtre d'informations. Il nécessite une bonne quantité de code, mais semble être assez simple.

---

Il y a d'autres exemples utilisant les Google Maps Bibliothèque Utilitaire (v3) de Style Marqueur d'extension. Certainement qu'ils ne sont pas aussi belles que l'exemple de la capture d'écran, cependant.

Answer 2

Pour les personnes encore en train d'essayer de réaliser cela, j'ai simplement mis en place cette aide de l'InfoBox de classe fourni par google que vous pouvez trouver ici. Essentiellement, il s'étend de l'infoWindow classe permettant pour plus de personnalisation et de style.

Découvrez leur exemple de base ici.

Cheers!

Answer 3

Vous pouvez modifier l'ensemble de l'InfoWindow à l'aide de jquery seul...

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

Ici, l'élément <p> va agir comme un crochet dans la InfoWindow. Une fois le domready incendies, l'élément devient actif et accessible à l'aide de javascript/jquery, comme $('#hook').parent().parent().parent().parent().

Le code ci-dessous juste définit 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 ne pouvez rien faire, comme l'implantation d'une nouvelle classe CSS ou tout simplement l'ajout d'un nouvel élément.

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

Answer 4

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

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

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

Ensuite utiliser ce un exemple : http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/docs/examples.html

Answer 5

Le style de l'infowindow est assez simple, avec de la vanille javascript. J'ai utilisé une partie de l'info de ce fil de discussion lors de l'écriture de ce. J'ai également pris en compte les éventuels problèmes avec les anciennes versions d'ie (bien que je ne l'ai pas testé).

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 la coutume, des superpositions ou des énormes code), à l'aide d'un div avec un id 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 ya un couple de pièces supplémentaires (qui ne sont pas strictement nécessaires) poignée de choses comme donner un crochet dans le div avec l'étroite fenêtre d'informations de l'image.

La dernière boucle cache toutes les pièces de la flèche. J'avais besoin de ce moi-même que je voulais avoir de la transparence sur l'infowindow à la flèche, et a obtenu de la manière. Bien sûr, avec le crochet, modifiant le code de remplacer l'image de flèche avec un png de votre choix devrait être assez simple aussi.

Si vous voulez le changer pour jquery (aucune idée de pourquoi vous voulez) alors que ce devrait être assez simple.

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