CSS 样式化 Google 地图信息窗口

Question

提问by Victor

I've been attempting to style my Google Maps InfoWindow, but the documentation is very limited on this topic. How do you style an InfoWindow?

我一直在尝试设计我的 Google Maps 的样式InfoWindow，但是关于这个主题的文档非常有限。你如何风格InfoWindow？

Answer 1

回答by Herman Schaaf

Google wrote some code to assist with this. Here are some examples: Example using InfoBubble, Styled markersand Info Window Custom(using OverlayView).

谷歌编写了一些代码来帮助解决这个问题。以下是一些示例：使用 InfoBubble、样式标记和信息窗口自定义（使用 OverlayView）的示例。

The code in the links above take different routes to achieve similar results. The gist of it is that it is not easy to style InfoWindows directly, and it might be easier to use the additional InfoBubble class instead of InfoWindow, or to override GOverlay. Another option would be to modify the elements of the InfoWindow using javascript (or jQuery), like later ATOzTOA suggested.

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

Possibly the simplest of these examples is using InfoBubble instead of InfoWindow. InfoBubble is available by importing this file (which you should host yourself): http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js

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

InfoBubble's Github project page.

InfoBubble 的 Github 项目页面。

InfoBubble is very stylable, compared to InfoWindow:

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

You can also call it with a given map and marker to open on:

您还可以使用给定的地图和标记调用它以打开：

infoBubble.open(map, marker);

As another example, the Info Window Custom example extends the GOverlay class from the Google Maps API and uses this as a base for creating a more flexible info window. It first creates the class:

作为另一个示例，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_);
}

after which it proceeds to override GOverlay:

之后它继续覆盖 GOverlay：

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

You should then override the methods you need: createElement, draw, removeand panMap. It gets rather involved, but in theory you are just drawing a div on the map yourself now, instead of using a normal Info Window.

然后，您应该重写你需要的方法：createElement，draw，remove和panMap。它相当复杂，但理论上您现在只是在地图上自己绘制一个 div，而不是使用普通的信息窗口。

Answer 2

回答by ATOzTOA

You can modify the whole InfoWindow using jquery alone...

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

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

Here the <p> element will act as a hook into the actual InfoWindow. Once the domready fires, the element will become active and accessible using javascript/jquery, like $('#hook').parent().parent().parent().parent().

此处 <p> 元素将充当连接到实际 InfoWindow 的钩子。一旦 domready 触发，该元素将变为活动状态并可使用 javascript/jquery 访问，例如$('#hook').parent().parent().parent().parent().

The below code just sets a 2 pixel border around the InfoWindow.

下面的代码只是在 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');
        }
    }
});

You can do anything like setting a new CSS class or just adding a new element.

你可以做任何事情，比如设置一个新的 CSS 类或者只是添加一个新元素。

Play around with the elements to get what you need...

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

Answer 3

回答by Vinod Kumar

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 put in stylesheet

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

Answer 4

回答by leochab

I used the following code to apply some external CSS:

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

Answer 5

回答by Yarin

Use the InfoBoxplugin from the Google Maps Utility Library. It makes styling/managing map pop-ups much easier.

使用Google Maps Utility Library 中的InfoBox插件。它使样式/管理地图弹出窗口变得更加容易。

Note that you'll need to make sure it loads afterthe google maps API:

请注意，您需要确保它在谷歌地图 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>

Answer 6

回答by Mayank Dudakiya

I have design google map infowindow with image & some content as per below.

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

map_script (Just for infowindow html reference)

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

Most important thing is CSS

最重要的是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;
}

Answer 7

回答by mariofertc

You could use a css class too.

您也可以使用 css 类。

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

Good day!

再会！

CSS 样式化 Google 地图信息窗口

提问by Victor

回答by Herman Schaaf

回答by ATOzTOA

回答by Vinod Kumar

回答by leochab

回答by Yarin

回答by Mayank Dudakiya

回答by mariofertc

相关推荐

最近更新

标签

CSS 样式化 Google 地图信息窗口

提问by Victor

回答by Herman Schaaf

回答by ATOzTOA

回答by Vinod Kumar

回答by leochab

回答by Yarin

回答by Mayank Dudakiya

回答by mariofertc

相关推荐

使用“数据：”的 CSS 透明背景图像

CSS 我应该使用 max-device-width 还是 max-width？

CSS：“粗体”和“粗体”字体粗细样式有什么区别？

CSS 偏移属性和静态位置

相关推荐

最近更新

标签