Styling Google Maps InfoWindow

小开

最佳答案

Google 为此编写了一些代码。下面是一些例子: 使用 InfoBubble 的示例，风格马克笔和自定义信息窗口(使用 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 的 Github 项目页面。

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

然后它继续覆盖 GoOverlay:

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

然后，您应该覆盖所需的方法: createElement、 draw、 remove和 panMap。它变得相当复杂，但是理论上你现在只是在地图上自己画一个 div，而不是使用一个普通的信息窗口。

小开

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

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

在这里，< p > 元素将充当实际 InfoWindow 的钩子。一旦 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 类，或者只是添加一个新元素。

玩弄这些元素，得到你需要的..。

小开

你也可以使用 css 类。

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

再见！

小开

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

小开

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

小开

使用谷歌地图实用程序库中的 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳插件，它使得样式/管理地图弹出窗口变得更加容易。

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

小开

我有设计谷歌地图信息窗口与图像和一些内容如下。

Map _ script (仅供 inowindowhtml 参考)

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

小开

MapInfoWindow 支持 html 和 css。

我通常用 css 类创建 html 字符串，所以我可以附加任何我想要的样式。

var contentString = '<div>Any Html here</div>';
marker.infowindow = new google.maps.InfoWindow({
content: contentString,
});

裁判来了。