API Карт Google v3: пользовательские стили для infowindow

Ответ 1

Обновить: см. этот ответ для состояния миграции исходного кода инфобокса в github.

Как использовать плагин Infobox, а не использовать обычный Infowindow? Я привел полный пример в пример jsfiddle здесь. Главное в инфобоксах состоит в том, что вы можете создавать свои инфобокс в своей странице html, давая вам полный контроль над тем, как это выглядит, используя css (и некоторые параметры javascript, если необходимо). Здесь html для инфобокса:

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

Идея здесь "infobox-wrapper" div будет скрыта (т.е. display: none в вашем css), а затем в вашем javascript вы инициализируете объект Infobox и даете ему ссылку на ваш "инфобокс" (внутри скрытого обертка) следующим образом:

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

Это всего лишь пример некоторых доступных параметров. Единственный необходимый ключ - content - ссылка на инфобокс.

И чтобы открыть информационное окно:

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

И для дальнейшего демонстрации гибкости InfoBox этот jsfiddle имеет изображение с переходом css как "информационное окно".

И один последний совет: Не используйте класс "инфобокс" в вашем html. Он, к сожалению, используется плагином, когда инфобокс действительно сгенерирован.

Ответ 2

Если вы не можете использовать инфобокс и вам нужно настроить infowindow, вы можете получить к нему доступ с помощью css. Это не очень, в значительной степени зависит от первых: дочерних/дочерних селекторов psuedo и, очевидно, от того, решает ли Google когда-либо менять свою структуру html-карты.

Надеюсь, что ниже css может помочь кому-то другому в привязке, когда они вынуждены иметь дело с 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;
}

Ответ 3

Вы можете создать стиль infoWindow, создав класс .gm-style-iw.

  #map-canvas {
    .gm-style {
      > div:first-child > div + div > div:last-child > div > div {
        &:first-child > div,
        &:first-child > div > div > div,
        &:last-child,
        &:last-child > img {
          display: none !important;
        }
      }
      .gm-style-iw {
        top: 20px !important;
        left: 130px !important;
        background: #fff;
        padding: 10px;
        height: 40px;
      }
    }
  }

Ответ 4

Я хотел иметь всплывающее окно прозрачной формы контакта на клике маркера google. Я сделал это, наконец, с помощью плагина infobox и этот пост. То, что я сделал.

Любой может скачать и использовать источник из здесь