Google Maps API v3: пользовательские стили для информационного окна

Question

Я пробовал многие примеры из справочника по картам Google и других вопросов, связанных со стековым потоком, но мне не удалось получить пользовательские стили в моем информационном окне.

Я использую что-то очень похожее на то, что было сделано в этом другом ответе stackoverflow

Вот оно работает / редактируется: http://jsfiddle.net/3VMPL/

В частности, я бы хотел иметь квадратные углы вместо закругленных.

Answer 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's 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 в качестве "информационного блока".

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

Answer 2

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

Надеюсь, что приведенный ниже css может помочь кому-то еще в безвыходном положении, когда им приходится иметь дело с информационным окном.

/* 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

Вы можете стилизовать информационное окно с помощью стиля .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;
      }
    }
  }

Answer 4

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

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