alcatrazbr
9/25/2016 - 10:03 PM

formatar o infowindow do google maps

formatar o infowindow do google maps

var infoWindow = new google.maps.InfoWindow({});
 infoWindow.open(map, marker);
 var dd = $(".gm-style-iw").parent();
 var de = $(dd).children('div').children();


// $(".gm-style-iw").css('border', '1px solid red');
// $(dd).css({'border': '3px solid orange', "width" : "600px"});
/* formatar o infoindow */
$(de).css({'width': '400px'});
<div id="info-content">
	<div class="info-content">
		<div class="col-lg-12 title"><span id="mot-nome"></span></div>
		<div class='content'>
			<div class="row">
				<div class="col-lg-4">
					<img src="/public/images/admin-s.png" alt="">
				</div>
				<div class="col-lg-8">				
					<div class="row">
						<div class="col-lg-4"><span>Nome:</span></div>
						<div class="col-lg-8"><span id="mot-nome"></span></div>
					</div>
					<div class="row">
						<div class="col-lg-4"><span>Tel:</span></div>
						<div class="col-lg-8"><span id="mot-tel" class=""></span></div>
					</div>
				</div>
			</div>			
		</div>
	</div>
</div>
.info-content {
	margin: 0px;
	padding: 0px;
	background: #FEFECE;
	max-height: 100px;
	overflow: hidden;
}

.info-content .title {
	padding-top: 5px;
	background: #2167C7;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: bolder;
	text-align: center;
	height: 32px;
}


.info-content div.content {
	margin: 0px;
	padding: 5px;
	// background: orange;
	max-height: 50px;
	overflow: hidden;
}

.gm-style .gm-style-iw {
	// background: yellow;
}

#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: 1px;
   border-radius: 2px 2px 0 0; /* De acordo com o arredondamento dos cantos da infowindow por padrão. */
}

.gm-style-iw {
   // width: 350px !important;
   max-height: 100px;
   top: 0 !important;
   left: 0 !important;
   // border: 2px solid green;
   border-radius: 2px 2px 0 0;
}