API Google Maps v3: styles personnalisés pour infowindow

Question

J'ai essayé de nombreux exemples issus de google maps de référence et d'autres stackoverflow questions, mais je n'ai pas été en mesure d'obtenir des styles personnalisés sur mon infowindow.

Je suis à l'aide de quelque chose de très similaire à ce qui a été fait dans cette autre stackoverflow répondre

Ici, il est de travail/modifiable: http://jsfiddle.net/3VMPL/

En particulier, je voudrais avoir des coins carrés au lieu de l'arrondi.

Answer 1

Comment sur l'utilisation de l'Infobox plugin plutôt que d'utiliser de l'habitude de l'Infowindow? Je vais mettre un exemple complet dans un jsfiddle exemple ici. La principale chose à propos de l'infobox, c'est que vous pouvez créer votre infobox dans votre page html, vous donnant un contrôle complet sur la façon dont il semble à l'aide de css (et un peu de javascript options, si nécessaire). Voici le code html pour l'infobox:

<div class="infobox-wrapper">
    <div id="infobox1">
        Infobox is very easy to customize because, well, it's your code
    </div>
</div>

L'idée ici est l' "infobox-wrapper" div sera caché (c'est à dire, display:none en css), puis dans votre javascript vous permet d'initialiser une Infobox objet et de lui donner une référence à votre "infobox" (à l'intérieur, le caché wrapper) comme suit:

infobox = new InfoBox({
    content: document.getElementById("infobox1"),
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.75,
                width: "280px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
    infoBoxClearance: new google.maps.Size(1, 1)
});

C'est juste un exemple de quelques-unes des options disponibles. La seule clé est - content - la référence à l'infobox. Découvrez toutes les options dans l' Infobox de l'API docs.

Et pour ouvrir la fenêtre d'informations:

google.maps.event.addListener(marker, 'click', function() {
    infobox.open(map, this);
    map.panTo(loc);
});

Et de supplémentaires de Google des exemples ici.

Et pour démontrer la flexibilité de l'InfoBox, ce jsfiddle a une image avec une transition css comme le "champ info".

Et un dernier conseil: Ne pas utiliser la catégorie "infobox" dans votre code html. Il est malheureusement utilisé par le plugin lors de l'infobox est réellement produite.

Answer 2

Si vous ne pouvez pas utiliser Infobox et avez besoin de personnaliser l’infowindow, vous pouvez y accéder en utilisant css. Ce n'est pas joli, cela dépend énormément du premier: enfant / dernier: sélecteurs de psuedo enfants et évidemment si Google décide de changer la structure de leur map html.

Espérons que les fichiers CSS ci-dessous peuvent aider quelqu'un d'autre dans une impasse quand ils sont forcés de traiter avec infowindow.

 /* white background and box outline */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div
{
    /* we have to use !important because we are overwritng inline styles */
    background-color: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
}

/* arrow colour */
.gm-style > div:first-child > div + div > div:last-child > div > div:first-child > div > div > div
{
    background-color: #003366 !important; 
}

/* close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child
{
    margin-right: 5px;
    margin-top: 5px;
}

/* image icon inside close button */
.gm-style > div:first-child > div + div > div:last-child > div > div:last-child > img
{
    display: none;
}

/* positioning of infowindow */
.gm-style-iw
{
    top: 22px !important;
    left: 22px !important;
}
 

Answer 3

Je voulais avoir un popup de contact transparent sur le clic de google map. Je l'ai finalement fait avec l'aide du plugin Infobox et de ce post . C'est ce que j'ai fait.

Tout le monde peut télécharger et utiliser la source à partir d' ici