// map center
var center = new google.maps.LatLng(2.855262784366583, 105.4302978515625);

function initialize() {
var mapOptions = {
center: center,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP

};

// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
document.getElementsByTagName('head')[0].appendChild(script);
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);

window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var coords = results.features[i].geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map
});



var content = '<div id="iw-container">' +
'<div class="iw-title">Porcelain Factory of Vista Alegre</div>' +
'<div class="iw-content">' +
'<div class="iw-subTitle">History</div>' +
'<img src="http://maps.marnoto.com/en/5wayscustomizeinfowindow/images/vistalegre.jpg" alt="Porcelain Factory of Vista Alegre" height="115" width="83">' +
'<p>Founded in 1824, the Porcelain Factory of Vista Alegre was the first industrial unit dedicated to porcelain production in Portugal. For the foundation and success of this risky industrial development was crucial the spirit of persistence of its founder, José Ferreira Pinto Basto. Leading figure in Portuguese society of the nineteenth century farm owner, daring dealer, wisely incorporated the liberal ideas of the century, having become "the first example of free enterprise" in Portugal.</p>' +
'<div class="iw-subTitle">Contacts</div>' +
'<p>VISTA ALEGRE ATLANTIS, SA<br>3830-292 Ílhavo - Portugal<br>'+
"<br>Phone. +351 234 320 600<br>e-mail: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail='b2d5d7c0d3def2c4d3d39cc2c6'>[email protected]</a><br>www: www.myvistaalegre.com</p>"+
'</div>' +
'<div class="iw-bottom-gradient"></div>' +
'</div>';

var infowindow = new google.maps.InfoWindow({
content: content,
maxWidth: 350
});

var marker = new google.maps.Marker({
position: latLng,
map: map,
title:"Porcelain Factory of Vista Alegre"
});


google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});

google.maps.event.addListener(infowindow, 'domready', function() {

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'});
iwOuter.parent().parent().css({left: '115px'});
iwBackground.children(':nth-child(1)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
iwBackground.children(':nth-child(3)').attr('style', function(i,s){ return s + 'left: 76px !important;'});
iwBackground.children(':nth-child(3)').find('div').children().css({'box-shadow': 'rgba(72, 181, 233, 0.6) 0px 1px 6px', 'z-index' : '1'});

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


google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
margin: 0;
padding: 0;
height: 400px;
max-width: none;
}
#map-canvas 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 lang="en" >

<head>
<meta charset="UTF-8">
<title>5 ways to customize the Google Maps infowindow</title>;

<link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div id="map-canvas"/>
</body>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>
<script  src="js/index.js"></script>

</body>

</html>