Javascript 在gmap.js上自定义infoWIndow时遇到问题

Javascript 在gmap.js上自定义infoWIndow时遇到问题,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我找到了一个如何使用GoogleMap定制infowindow的教程,我正在使用库gmap.js,所以它至少对我来说有点不同,因为有时我必须重写代码。我做了,但问题是当你第一次点击一个标记时,设计看起来很糟糕,然后当你点击另一个标记时,设计看起来就像它应该的那样。我不知道第一次点击会发生什么 如果您有兴趣查看本教程,请执行以下操作: var-lat=18.47695116317757; var lng=-69.82995986938477; var=13; //卡加马帕 $(文档).read

我找到了一个如何使用GoogleMap定制infowindow的教程,我正在使用库gmap.js,所以它至少对我来说有点不同,因为有时我必须重写代码。我做了,但问题是当你第一次点击一个标记时,设计看起来很糟糕,然后当你点击另一个标记时,设计看起来就像它应该的那样。我不知道第一次点击会发生什么

如果您有兴趣查看本教程,请执行以下操作:

var-lat=18.47695116317757;
var lng=-69.82995986938477;
var=13;
//卡加马帕
$(文档).ready(函数(){
var map=新GMAP({
分区:“#地图”,
拉特:拉特,
液化天然气:液化天然气,
缩放:缩放,
动物控制:对,
ZoomControl控件:{
风格:“小”,
位置:“左上方”
},
泛控制:对,
街景控制:错误,
mapTypeControl:false,
概览地图控件:false
});
//卡加·马卡斯
Aparecarcas(18.49021274113021,-69.86058533191681,'title','2016-03-02 02:40:28','Lorem Ipsum es simplemente el texto de relleno de las impentas and archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias des el año 1500,cuando un importor(N.del T.persona que dedica a a la impenta)描述我们对文本的理解和对文本自由的理解。不使用500 años,不使用电子文档,不使用原始文档,1,0);
Aparecarcas(18.47695116317757,-69.82995986938477,'los title','2016-03-02 02:41:02','Lorem Ipsum es simplemente el texto de relleno de las impentas and archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias de el año 1500,cuando un importor(N.del T.persona que se dedica a a la impenta)描述我们对文本的理解和对文本自由的理解。不使用500 años,不使用电子文档中的其他文本,请参阅《电子文档》(quedando esencialmente igual al original.Fue pop.),2300);
//鳍
函数AparRecerMarcas(latitud、longitud、titulo、fecha、Description、imagen、id、tiempo){
setTimeout(函数(){
var mapa=map.addMarker({
纬度,
lng:longitud,
标题:提图洛,
动画:google.maps.animation.DROP,
单击:函数(){
//Inicio定制信息窗口
var-iwOuter=$('.gm-style-iw');
var iwBackground=iwOuter.prev();
children(':nth child(2)').css({'display':'none'});
children(':nth child(4)').css({'display':'none'});
var iwCloseBtn=iwOuter.next();
css({opacity:'1',right:'38px',top:'3px',border:'7px solid#48b5e9','border radius':'13px','box shadow':'05px#3990B9'});
如果($('.iw content').height()<140){
$('.iw bottom gradient').css({display:'none'});
}
iwCloseBtn.mouseout(函数(){
$(this.css({opacity:'1'});
});         
//Fin cutomizar信息窗口
},
信息窗口:{
内容:“”+
''+titulo+''+
'' +
''+fecha+''+
'' +
“”+描述离子+”

”+ “Leer Mas”+ '' + '' + '', 最大宽度:350 } }) //log(mapa['infoWindow']); // },田埔); } google.maps.event.addListenerOnce(map.map,'domready',function(){ map.removeMarkes(); }); //鳍 });
正文{
保证金:0;
填充:0;
}
html{
身高:100%;
}
身体{
身高:100%;
保证金:0;
填充:0;
}
#地图{
保证金:0;
填充:0;
高度:400px;
最大宽度:无;
}
#映射img{
最大宽度:无!重要;
}
.gm风格iw{
宽度:350px!重要;
顶部:15px!重要;
左:0px!重要;
背景色:#fff;
盒影:0 1px 6px rgba(1781781780,0.6);
边框:1px实心rgba(721812330.6);
边界半径:2p2px10px 10px;
}
#iw集装箱{
边缘底部:10px;
}
#iw容器{
字体系列:“开放式Sans压缩”,无衬线;
字体大小:22px;
字体大小:400;
填充:10px;
背景色:#48b5e9;
颜色:白色;
保证金:0;
边界半径:2×2×0;
}
#iw容器{
字体大小:13px;
线高:18px;
字体大小:400;
右边距:1px;
填充:15px 5px 20px 15px;
最大高度:140像素;
溢出y:自动;
溢出x:隐藏;
}
.iw内容img{
浮动:对;
保证金:0 5px 5px 10px;
}
.iw字幕{
字体大小:16px;
字号:700;
填充:5px0;
}
.iw底部坡度{
位置:绝对位置;
宽度:326px;
高度:25px;
底部:10px;
右:18px;
背景:线性梯度(至底部,rgba(255255,0)0%,rgba(255255,1)100%);
背景:-webkit线性梯度(顶部,rgba(255255,0)0%,rgba(255255,1)100%);
背景:-moz线性梯度(顶部,rgba(255255,0)0%,rgba(255255,1)100%);
背景:-ms线性梯度(顶部,rgba(255255,0)0%,rgba(255255,1)100%);
}

GMaps.js文档HTML

您必须等待infowindow“domready”事件,然后才能操作其DOM。查看的源代码,标记的信息窗口是
marker.infoWindow

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

GMaps.js文档HTML

您必须等待infowindow“domready”事件,然后才能操作其DOM。查看源代码,标记的是i