Стилирование Google Maps InfoWindow

Ответ 1

Google написал код, чтобы помочь с этим. Вот несколько примеров: Пример использования InfoBubble, Стилированные маркеры и Info Window Custom (с использованием OverlayView).

В приведенных выше ссылках для достижения аналогичных результатов используются разные маршруты. Суть его в том, что нелегко непосредственно настроить InfoWindows, и может быть проще использовать дополнительный класс InfoBubble вместо InfoWindow или переопределить GOWOWLAY. Другим вариантом было бы изменить элементы InfoWindow с помощью javascript (или jQuery), как это было предложено позже ATOzTOA.

Возможно, самым простым из этих примеров является использование InfoBubble вместо InfoWindow. InfoBubble доступен, импортировав этот файл (который вы должны разместить самостоятельно): http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

Страница проекта InfoBubble Github.

InfoBubble очень стильный, по сравнению с InfoWindow:

 infoBubble = new InfoBubble({
      map: map,
      content: '<div class="mylabel">The label</div>',
      position: new google.maps.LatLng(-32.0, 149.0),
      shadowStyle: 1,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 5,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 30,
      backgroundClassName: 'transparent',
      arrowStyle: 2
});

infoBubble.open();

Вы также можете вызвать его с заданной картой и маркером, чтобы открыть:

infoBubble.open(map, marker);

В качестве другого примера пример Custom Window Custom расширяет класс GOverlay из API Карт Google и использует его в качестве основы для создания более гибкого информационного окна. Сначала он создает класс:

/* An InfoBox is like an info window, but it displays
 * under the marker, opens quicker, and has flexible styling.
 * @param {GLatLng} latlng Point to place bar at
 * @param {Map} map The map on which to display this InfoBox.
 * @param {Object} opts Passes configuration options - content,
 *   offsetVertical, offsetHorizontal, className, height, width
 */
function InfoBox(opts) {
  google.maps.OverlayView.call(this);
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -195;
  this.offsetHorizontal_ = 0;
  this.height_ = 165;
  this.width_ = 266;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener(this.map_, "bounds_changed", function() {
      return me.panMap.apply(me);
    });

  // Once the properties of this OverlayView are initialized, set its map so
  // that we can display it.  This will trigger calls to panes_changed and
  // draw.
  this.setMap(this.map_);
}

после чего он переходит к переопределению GOverlay:

InfoBox.prototype = new google.maps.OverlayView();

Затем вы должны переопределить методы, которые вам нужны: createElement, draw, remove и panMap. Он становится довольно вовлеченным, но в теории вы просто рисуете div на карте самостоятельно, вместо того, чтобы использовать обычное информационное окно.

Ответ 2

Вы можете изменить весь InfoWindow, используя только jquery...

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

Здесь <p> элемент будет действовать как крючок в фактический InfoWindow. Как только domready будет срабатывать, элемент станет активным и доступным с помощью javascript/jquery, например $('#hook').parent().parent().parent().parent().

В приведенном ниже коде просто устанавливается граница 2 пикселя вокруг 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');
        }
    }
});

Вы можете сделать что угодно, например, установить новый класс CSS или просто добавить новый элемент.

Играйте с элементами, чтобы получить то, что вам нужно...

Ответ 3

Я использовал следующий код для применения внешнего CSS:

boxText = document.createElement("html");
boxText.innerHTML = "<head><link rel='stylesheet' href='style.css'/></head><body>[some html]<body>";

infowindow.setContent(boxText);
infowindow.open(map, marker);

Ответ 4

google.maps.event.addListener(infowindow, 'domready', function() {

    // Reference to the DIV that wraps the bottom of infowindow
    var iwOuter = $('.gm-style-iw');

    /* Since this div is in a position prior to .gm-div style-iw.
     * We use jQuery and create a iwBackground variable,
     * and took advantage of the existing reference .gm-style-iw for the previous div with .prev().
    */
    var iwBackground = iwOuter.prev();

    // Removes background shadow DIV
    iwBackground.children(':nth-child(2)').css({'display' : 'none'});

    // Removes white background DIV
    iwBackground.children(':nth-child(4)').css({'display' : 'none'});

    // Moves the infowindow 115px to the right.
    iwOuter.parent().parent().css({left: '115px'});

    // Moves the shadow of the arrow 76px to the left margin.
    iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Moves the arrow 76px to the left margin.
    iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});

    // Changes the desired tail shadow color.
    iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});

    // If the content of infowindow not exceed the set maximum height, then the gradient is removed.
    if($('.iw-content').height() < 140){
      $('.iw-bottom-gradient').css({display: 'none'});
    }

    // The API automatically applies 0.7 opacity to the button after the mouseout event. This function reverses this event to the desired value.
    iwCloseBtn.mouseout(function(){
      $(this).css({opacity: '1'});
    });
  });

//CSS помещается в таблицу стилей

.gm-style-iw {
  background-color: rgb(237, 28, 36);
    border: 1px solid rgba(72, 181, 233, 0.6);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
    color: rgb(255, 255, 255) !important;
    font-family: gothambook;
    text-align: center;
    top: 15px !important;
    width: 150px !important;
}

Ответ 5

Вы также можете использовать класс css.

$('#hook').parent().parent().parent().siblings().addClass("class_name");

Добрый день!

Ответ 6

Используйте плагин InfoBox из Библиотеки Google Maps Utility. Это облегчает создание/управление всплывающими картами карт.

Обратите внимание, что вам нужно будет убедиться, что он загружается после API карт google:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
<script src="/js/infobox_packed.js" async defer></script>