How can I customize a Google Maps InfoWindow?

Question

Mates, I'm trying to style the close button and some margins in an InfoWindow element. They're loading it's content, styling it, but I need to style the infowindow itself.

Here's the infowindow html, maybe it helps

    <div style="cursor: default; position: absolute; width: 327px; height: 68px; left: 25px; top: 135px; z-index: 135;">
    <div style="position: absolute; left: 0px; top: 0px;">
        <div
            style="width: 0px; height: 0px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 24px solid rgba(0, 0, 0, 0.0980392); position: absolute; left: 154px; top: 68px;">
        </div>
        <div
            style="position: absolute; left: 0px; top: 0px; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; width: 327px; height: 68px; display: none; background-color: rgba(0, 0, 0, 0.2);">
        </div>
        <div style="border-top-width: 24px; position: absolute; left: 154px; top: 65px;">
            <div style="position: absolute; overflow: hidden; left: -6px; top: -1px; width: 16px; height:
                        30px;">
                <div style="position: absolute; left: 6px; transform: skewX(22.6deg); transform-origin: 0px 0px
                        0px; height: 24px; width: 10px; box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px; background-color:
                        rgb(255, 255, 255);"></div>
            </div>
            <div style="position: absolute; overflow: hidden; top: -1px; left: 10px; width: 16px; height:
                        30px;">
                <div style="position: absolute; left: 0px; transform: skewX(-22.6deg); transform-origin: 10px 0px
                        0px; height: 24px; width: 10px; box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px; background-color:
                        rgb(255, 255, 255);"></div>
            </div>
        </div>
        <div style="position: absolute; left: 1px; top: 1px; border-radius: 2px; width: 325px; height:
            66px; display: none; background-color: rgb(255, 255, 255);"></div>
    </div>
    <div
        class="gm-style-iw" style="top: 9px; position: absolute; left: 15px; width: 297px;">
        <div style
                 ="display: inline-block; overflow: auto; max-height: 390px; max-width: 274px;">
            <div class=
                     "iw-container" style="opacity: 1;">
                <div class="iw-title ng-binding">
                    Estás
                    aquí
                </div>
                < !--ngIf
                :
                !m.aqui-- >
            </div>
        </div>
    </div>
    <div
        style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 10px; z-index: 10000;">
        <img src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png" draggable="false"
             style="position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -webkit-user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">
    </div>
    <img src="http://maps.gstatic.com/mapfiles/transparent.png" draggable="false"
         style="width: 37px; height: 37px; -webkit-user-select: none; border: 0px; padding: 0px; margin:0px; position: absolute; right: 0px; top: -2px; z-index: 10001; cursor: pointer;">
</div>

I'm using angular-google-maps library. I'm loading infowindows like this:

<ui-gmap-window options="m.window.options" closeClick="closeClick()">
                    <div class="iw-container">
                        <div class="iw-title">
                            {{m.window.title}}
                        </div>
                        <div class="iw-body" ng-if="!m.aqui">
                            <p>
                                <strong>Direcci&oacute;n: </strong>{{m.window.direccion}}<br/>
                                <strong>Horarios: </strong>{{m.window.horarios}}</p>
                        </div>
                    </div>
                </ui-gmap-window>

Once the InfoWindow is opened, I execute this lines in order to change some styles:

var iwOuter = $('.gm-style-iw');
                    //Remove background and pointer
                    iwOuter.each(function(i,e) {
                        var el = $(e);
                        var iwBackground = el.prev();
                        // Remove the background shadow DIV
                        iwBackground.children(':nth-child(2)').css({'display' : 'none'});
                        // Remove the white background DIV
                        iwBackground.children(':nth-child(4)').css({'display' : 'none'});
                    });

This lines got'em from this tutorial:

http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html

But when I try to remove the white space on the right side of the infowindow, it doesn't work. Have been trying for a few hours and can't figure out how to get what I want. Hope you can help me

Answer 1

I did it this way, you can try it. dynamic infowindow with dynamic markers.

Index.cshtml

@{
    Layout = null;
}

<html>
<head> 
    <style>
        #map-canvas {
            margin: 0;
            padding: 0;
            height: 400px;
            max-width: none;
        }
        .gm-style-iw {

            width: 350px !important;
            /*top: 0px !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: 10px 10px 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: 20px;
                background-color: #39ac73;
                color: white;
                margin: 2px;
                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: 200px;
                overflow-y: auto;
                overflow-x: hidden;
            }

        #map-canvas img {
            max-width: none !important;
        }
        .iw-subTitle {
            font-size: 16px;
            font-weight: 700;
            padding: 5px 0;
        } 
        .infoDiv {
            height: 200px;
            width: 300px;
            -webkit-user-select: none;
            background-color: white;
        }
        .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%);
        }
    </style>
</head>
<body> 
        <div id="map-canvas" style="width: 1800px; height: 1500px">
        </div>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY"></script>
        <script type="text/javascript">
             var markers = @Html.Raw(ViewBag.Markers);
             window.onload = function () {
                 var mapOptions = {
                     center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                     zoom: 8,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                 };  
                var infoWindow = new google.maps.InfoWindow();

                 var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
                 for (i = 0; i < markers.length; i++) {
                     var data = markers[i]
                     var myLatlng = new google.maps.LatLng(data.lat, data.lng);

                     var marker = new google.maps.Marker({
                         position: myLatlng,
                         map: map,
                         title: data.title,
                         description: data.description,
                         icon: "http://maps.google.com/mapfiles/ms/icons/green-dot.png",
                         animation: google.maps.Animation.DROP,

                     }); 
                     // Add the circle for this city to the map.
                     var cityCircle = new google.maps.Circle({
                         strokeColor: '#FFFFFF',
                         strokeOpacity: 0.8,
                         strokeWeight: 2,
                         fillColor: '#FFFFFF',
                         fillOpacity: 0.35,
                         map: map,
                         center: myLatlng,
                         radius: 19999.45454,
                         position: myLatlng,
                         draggable: false
                     });
                     (function (marker, data) {
                         google.maps.event.addListener(marker, "click", function (e) {
                              infoWindow.setContent('<div id="iw-container">' +
                                 '<div class="iw-title">' + data.title + "</div>" + '<div class="iw-content">' 
                                 + "<p>" + data.description + "</p>"+'<img src="http://maps.marnoto.com/en/5wayscustomizeinfowindow/images/vistalegre.jpg" alt="Porcelain Factory of Vista Alegre" height="115" width="83">'
                                 +'<div class="iw-bottom-gradient"></div>');
                             //infoWindow.setContent(data.title);
                             //infoWindow.setContent(data.description);
                             infoWindow.open(map, marker);

                         });

                     })(marker, data);
                 }
             }
        </script> 
</body>
</html>

Controller:

namespace Map.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            {
                string markers = "[";
                string conString = ConfigurationManager.ConnectionStrings["PTS"].ConnectionString;
                SqlCommand cmd = new SqlCommand("SELECT * FROM ProjeIlani");
                using (SqlConnection con = new SqlConnection(conString))
                {
                    cmd.Connection = con;
                    con.Open();
                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            markers += "{";
                            markers += string.Format("'title': '{0}',", sdr["Adres"]);
                            markers += string.Format("'lat': '{0}',", sdr["Enlem"]);
                            markers += string.Format("'lng': '{0}',", sdr["Boylam"]);
                            markers += string.Format("'description': '{0}'", sdr["Aciklama"]); 
                            markers += "},";
                        }
                    }
                    con.Close();
                }

                markers += "];";
                ViewBag.Markers = markers;
                return View();
            }
        }
    }
}

Answer 2

This article should provide you with everything you need, including adjusting margins and the close button, specifically.

http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html