样式化谷歌地图信息窗口答案

【问题标题】：Styling Google Maps InfoWindow样式化谷歌地图信息窗口
【发布时间】：2011-08-03 20:21:02
【问题描述】：

我一直在尝试设置我的 Google 地图 InfoWindow 的样式，但有关此主题的文档非常有限。你如何设计InfoWindow？

【问题讨论】：

【解决方案1】：

Google 编写了一些代码来帮助解决这个问题。以下是一些示例：Example using InfoBubble、Styled markers 和 Info Window Custom（使用 OverlayView）。

以上链接中的代码采用不同的路线来实现相似的结果。它的要点是直接设置 InfoWindows 的样式并不容易，使用附加的 InfoBubble 类而不是 InfoWindow 或覆盖 GOverlay 可能更容易。另一种选择是使用 javascript（或 jQuery）修改 InfoWindow 的元素，就像后来的 ATOzTOA 建议的那样。

这些示例中最简单的可能是使用 InfoBubble 而不是 InfoWindow。 InfoBubble 可通过导入此文件（您应该自己托管）获得：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

InfoBubble's Github project page.

与 InfoWindow 相比，InfoBubble 非常有风格：

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

作为另一个示例，Info Window Custom 示例从 Google Maps API 扩展了 GOverlay 类，并将其用作创建更灵活的信息窗口的基础。它首先创建类：

/* 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，而不是使用普通的信息窗口。

【讨论】：

@ShyamK 这是一个与styling KML info windows 相关的问题，可能会对您有所帮助。我认为我回答中的许多示例可能不适用于 KML（我不确定），但也可以轻松调整以在这种情况下工作。
应该注意，您的链接之一是 InfoBox 对象（另一种类型的信息窗口）的示例，而不是 InfoWindow 对象（原始的 google 信息窗口）。很高兴知道您是否在谷歌上搜索它，并且可能对为什么可以找到 new InfoBox() 和 new InfoWindow() 感到困惑。 InfoBox 是较新的一个，更容易自定义 IMO，您可以自定义更多内容。另一个例子也可以在this SO answer 中看到
哦，不，最后一个也不是：那也是关于 infoBox。
很好，这就是我一直在寻找的东西，顺便说一句，我如何添加一个关闭按钮？

【解决方案2】：

您可以单独使用 jquery 修改整个 InfoWindow...

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

这里的

元素将充当实际信息窗口的挂钩。一旦 domready 触发，该元素将变为活动状态并且可以使用 javascript/jquery 访问，例如 $('#hook').parent().parent().parent().parent()。

下面的代码只是在 InfoWindow 周围设置了一个 2 像素的边框。

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 类或添加新元素。

玩弄元素以获得你需要的东西......

【讨论】：

这适用于我（少了一个父母），并且适用于浏览器（opera、ff，即 safari、chrome），但不适用于 IE9。
支持包含一些我正在寻找如何使用的额外代码。谢谢
当我将它包含在文档中（准备好）、窗口中（加载）或页面加载后直接粘贴到控制台时，我会收到“未定义弹出窗口”。我是否缺少外部 js 文件或其他内容？
这不是一个好主意，因为 Google 地图呈现逻辑不是永久的。改用弹出窗口：developers.google.com/maps/documentation/javascript/examples/…

【解决方案3】：

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

【讨论】：

此代码在 Chrome 中存在尾部问题。您必须点击 2 次才能让尾巴显示正确的位置
复制自en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html

【解决方案4】：

我使用以下代码应用了一些外部 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);

【讨论】：

我可以直接使用 .gm-style > div > div:nth-child(3) > div:nth-child(4) > div > div > div:nth- 来定位 css孩子(2){

【解决方案5】：

我已经设计了带有图像和一些内容的谷歌地图信息窗口，如下所示。

map_script（仅供 infowindow html 参考）

for (i = 0; i < locations.length; i++) { 
    var latlng = new google.maps.LatLng(locations[i][1], locations[i][2]);
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: "<?php echo plugins_url( 'assets/img/map-pin.png', ELEMENTOR_ES__FILE__ ); ?>"
    });

    var property_img = locations[i][6],
    title = locations[i][0],
    price = locations[i][3],
    bedrooms = locations[i][4],
    type = locations[i][5],
    listed_on = locations[i][7],
    prop_url = locations[i][8];

    content = "<div class='map_info_wrapper'><a href="+prop_url+"><div class='img_wrapper'><img src="+property_img+"></div>"+
    "<div class='property_content_wrap'>"+
    "<div class='property_title'>"+
    "<span>"+title+"</span>"+
    "</div>"+

    "<div class='property_price'>"+
    "<span>"+price+"</span>"+
    "</div>"+

    "<div class='property_bed_type'>"+
    "<span>"+bedrooms+"</span>"+
    "<ul><li>"+type+"</li></ul>"+
    "</div>"+

    "<div class='property_listed_date'>"+
    "<span>Listed on "+listed_on+"</span>"+
    "</div>"+
    "</div></a></div>";

    google.maps.event.addListener(marker, 'click', (function(marker, content, i) {
        return function() {
            infowindow.setContent(content);
            infowindow.open(map, marker);
        }
    })(marker, content, i));
}

最重要的是 CSS

 #propertymap .gm-style-iw{
    box-shadow:none;
    color:#515151;
    font-family: "Georgia", "Open Sans", Sans-serif;
    text-align: center;
    width: 100% !important;
    border-radius: 0;
    left: 0 !important;
    top: 20px !important;
}

 #propertymap .gm-style > div > div > div > div > div > div > div {
    background: none!important;
}

.gm-style > div > div > div > div > div > div > div:nth-child(2) {
     box-shadow: none!important;
}
 #propertymap .gm-style-iw > div > div{
    background: #FFF!important;
}

 #propertymap .gm-style-iw a{
    text-decoration: none;
}

 #propertymap .gm-style-iw > div{
    width: 245px !important
}

 #propertymap .gm-style-iw .img_wrapper {
    height: 150px;  
    overflow: hidden;
    width: 100%;
    text-align: center;
    margin: 0px auto;
}

 #propertymap .gm-style-iw .img_wrapper > img {
    width: 100%;
    height:auto;
}

 #propertymap .gm-style-iw .property_content_wrap {
    padding: 0px 20px;
}

 #propertymap .gm-style-iw .property_title{
    min-height: auto;
}

【讨论】：

谢谢！ CSS 不起作用，但通过使用开发人员工具并直接上课就可以轻松完成，不需要 .gm 样式的东西。

【解决方案6】：

使用 Google 地图实用程序库中的 InfoBox 插件。它使样式/管理地图弹出窗口更加容易。

请注意，您需要确保它在 google maps API 之后加载：

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

【讨论】：

【解决方案7】：

你也可以使用 css 类。

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

美好的一天！

【讨论】：