javascript 使用 Google Maps API 设置 InfoWindow 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15140803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling InfoWindow with Google Maps API
提问by sjarmenitt
I'm currently working with Google Maps, and everything works fine by now. But I want to change the styling of the InfoWindow. I have been researching, but haven't find anything useful yet to help me understand InfoWindow (not even the API Documentation.)
我目前正在使用 Google 地图，现在一切正常。但我想更改 InfoWindow 的样式。我一直在研究，但还没有找到任何有用的东西来帮助我理解 InfoWindow（甚至不是 API 文档。）
So; how do I change the styling like colors, background, borders and etc. of the InfoWindow box in my map?
所以; 如何更改地图中信息窗口框的样式，如颜色、背景、边框等？
Thanks in advance.
提前致谢。
Heres my code:
这是我的代码：
<!DOCTYPE html>
<head>
<title>Google Maps Example</title>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 font-family: Helvetica;}
#map_canvas { height: 100% }
.InfoWindow {
background: #000;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
$(document).ready(function () { initialize(); });
function initialize() {
var centerMap = new google.maps.LatLng(59.9149, 10.72974);
var myOptions = {
zoom: 14,
center: centerMap,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var sites = [
['Mount Evans', 59.934615,10.743392, 4, '<div class="InfoWindow"><b>This is Mount Evans.</b></div>'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
];
var image = new google.maps.MarkerImage(
'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/bar.png',
new google.maps.Size(30,37)
);
function setMarkers(map, markers) {
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4],
icon: image
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Edit: It does not look like it's possible to style InfoWindow (just the input). However, Infobox makes this possible.
编辑：看起来不可能设置 InfoWindow 样式（只是输入）。但是，信息框使这成为可能。
采纳答案by Ross Joo
From the API: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows
来自 API：https: //developers.google.com/maps/documentation/javascript/overlays#InfoWindows
The InfoWindow's content may contain either a string of text, a snippet of HTML, or a DOM element itself.
InfoWindow 的内容可能包含文本字符串、HTML 片段或 DOM 元素本身。
You can pass in styled HTML or you can create the InfoWindow itself, then pull it in JS as an object.
您可以传入样式化的 HTML，也可以创建 InfoWindow 本身，然后将其作为对象拉入 JS。
回答by saqib kifayat
use .gm-style .gm-style-iw classes for styling the text for example:
使用 .gm-style .gm-style-iw 类来设置文本样式，例如：
.gm-style .gm-style-iw {
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
text-transform: uppercase;
}
回答by Kirtikumar A.
You can change it with java script as below
您可以使用 java 脚本更改它，如下所示
var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #ed1e79;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>"You feild"</b></strong></div><div style="clear:both;height:0px;"><div style="float:left;width:90%;padding:5px 10px;border:1px solid #ccc;border-top:none;border-radius:0px 0px 5px 5px;"><div style="float:left;color:#666;font-size:18px;font-weight:bold;margin:5px 0px;"> <div style="padding: 0px;">]]..product_list[i].category..[[</div></div><div style="clear:both;height:0px;"></div><div style="float:left;line-height:18px;color:#666;font-size:13px;">"You feild"</div><div style="clear:both;height:0px;"></div><form action=\"navigat:"You feild"\"><input type=\"submit\"/ style=\"background:#7e7e7e;float:right;color:#FFF;padding:5px 7px;font-size:10px;font-weight:bold;border:none;margin:5px 0px; border-radius:0px !important;\" value=\"More Info\" ></form></div></div>';
var infowindow = new google.maps.InfoWindow({content:contentString});
