我找到了一个如何使用谷歌地图自定义你的信息窗口的教程，我正在使用库gmap.js，所以它至少对我来说有点不同，因为有时我必须覆盖代码。我做到了，但问题是当你第一次点击标记时，设计看起来“太可怕了”，然后当你点击另一个标记时，设计看起来应该是这样。我不知道第一次点击会发生什么。
如果您有兴趣查看该教程： http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html
body{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
margin: 0;
padding: 0;
height: 400px;
max-width: none;
}
#map img {
max-width: none !important;
}
.gm-style-iw {
width: 350px !important;
top: 15px !important;
left: 0px !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 10px 10px;
}
#iw-container {
margin-bottom: 10px;
}
#iw-container .iw-title {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
font-weight: 400;
padding: 10px;
background-color: #48b5e9;
color: white;
margin: 0;
border-radius: 2px 2px 0 0;
}
#iw-container .iw-content {
font-size: 13px;
line-height: 18px;
font-weight: 400;
margin-right: 1px;
padding: 15px 5px 20px 15px;
max-height: 140px;
overflow-y: auto;
overflow-x: hidden;
}
.iw-content img {
float: right;
margin: 0 5px 5px 10px;
}
.iw-subTitle {
font-size: 16px;
font-weight: 700;
padding: 5px 0;
}
.iw-bottom-gradient {
position: absolute;
width: 326px;
height: 25px;
bottom: 10px;
right: 18px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js Document HTML</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.22/gmaps.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:500px; opacity: 1;"></div>
</body>
</html>{{1}}
答案 0 :(得分：2)
你必须等待infowindow＆＃34; domready＆＃34;在您可以操纵其DOM之前的事件。查看GMaps.js的来源，标记的infoWindow为marker.infoWindow。
source第26行：marker.infoWindow = new google.maps.InfoWindow(options.infoWindow);
所以这应该有效：
google.maps.event.addListenerOnce(mapa.infoWindow, 'domready', function() {
//Inicio customizar infowindows
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
var iwCloseBtn = iwOuter.next();
iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});
if($('.iw-content').height() < 140){
$('.iw-bottom-gradient').css({display: 'none'});
}
iwCloseBtn.mouseout(function(){
$(this).css({opacity: '1'});
});
//Fin cutomizar infowindow
});
代码段
var lat = 18.47695116317757;
var lng = -69.82995986938477;
var zoom = 13;
//Cargar mapa
$(document).ready(function(){
var map = new GMaps({
div: '#map',
lat: lat,
lng: lng,
zoom: zoom,
zoomControl : true,
zoomControlOpt: {
style : "SMALL",
position: "TOP_LEFT"
},
panControl : true,
streetViewControl : false,
mapTypeControl: false,
overviewMapControl: false
});
//Cargar marcas
aparecerMarcas(18.49021274113021,-69.86058533191681,'title','2016-03-02 02:40:28','Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue pop','',1,0);
aparecerMarcas(18.47695116317757,-69.82995986938477,'los title','2016-03-02 02:41:02','Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue pop','',2,300);
//Fin
function aparecerMarcas(latitud,longitud,titulo,fecha,descripcion,imagen,id,tiempo){
setTimeout(function(){
var mapa = map.addMarker({
lat: latitud,
lng: longitud,
title: titulo,
animation:google.maps.Animation.DROP,
infoWindow: {
content: '<div id="iw-container">' +
'<div class="iw-title">'+titulo+'</div>' +
'<div class="iw-content">' +
'<div class="iw-subTitle">'+fecha+'</div>' +
'<img src=images/'+imagen+' alt='+titulo+' height="115" width="83">' +
'<p>'+descripcion+'</p>' +
'<div class="iw-subTitle"><a href=info.php>Leer Mas</div>' +
'</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>',
maxWidth: 350
}
});
google.maps.event.addListenerOnce(mapa.infoWindow, 'domready', function() {
//Inicio customizar infowindows
var iwOuter = $('.gm-style-iw');
var iwBackground = iwOuter.prev();
iwBackground.children(':nth-child(2)').css({'display' : 'none'});
iwBackground.children(':nth-child(4)').css({'display' : 'none'});
var iwCloseBtn = iwOuter.next();
iwCloseBtn.css({opacity: '1', right: '38px', top: '3px', border: '7px solid #48b5e9', 'border-radius': '13px', 'box-shadow': '0 0 5px #3990B9'});
if($('.iw-content').height() < 140){
$('.iw-bottom-gradient').css({display: 'none'});
}
iwCloseBtn.mouseout(function(){
$(this).css({opacity: '1'});
});
//Fin cutomizar infowindow
});
},tiempo);
}
google.maps.event.addListenerOnce(map.map, 'domready', function(){
map.removeMarkers();
});
//Fin
});body{
margin: 0;
padding: 0;
}
html{
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
margin: 0;
padding: 0;
height: 400px;
max-width: none;
}
#map img {
max-width: none !important;
}
.gm-style-iw {
width: 350px !important;
top: 15px !important;
left: 0px !important;
background-color: #fff;
box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6);
border: 1px solid rgba(72, 181, 233, 0.6);
border-radius: 2px 2px 10px 10px;
}
#iw-container {
margin-bottom: 10px;
}
#iw-container .iw-title {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 22px;
font-weight: 400;
padding: 10px;
background-color: #48b5e9;
color: white;
margin: 0;
border-radius: 2px 2px 0 0;
}
#iw-container .iw-content {
font-size: 13px;
line-height: 18px;
font-weight: 400;
margin-right: 1px;
padding: 15px 5px 20px 15px;
max-height: 140px;
overflow-y: auto;
overflow-x: hidden;
}
.iw-content img {
float: right;
margin: 0 5px 5px 10px;
}
.iw-subTitle {
font-size: 16px;
font-weight: 700;
padding: 5px 0;
}
.iw-bottom-gradient {
position: absolute;
width: 326px;
height: 25px;
bottom: 10px;
right: 18px;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GMaps.js Document HTML</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.22/gmaps.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:500px; opacity: 1;"></div>
</body>
</html>