Question

Is it possible to change the color of the border, the alignment, padding and other attributes of an InfoWindow? I’ve been looking for this for a week but I always end up here. And it does not provide a code.

Here’s my code.

        //Declare an infoWindow variable - shows when a marker is tapped/clicked
        var infoWindow = new google.maps.InfoWindow;

        // Change this depending on the name of your PHP file
        downloadUrl("outputXML.php", function(data)
        {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
            var html = "<b>" + name + "</b> <br/>" + address;
            var icon = customIcons[type] || {};
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                title:name
                });
            bindInfoWindow(marker, map, infoWindow, html);
            }
       });               
        
        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function() {
              infoWindow.setContent(html);
              infoWindow.open(map, marker);
            });
          }

          function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
              if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
              }
            };

            request.open('GET', url, true);
            request.send(null);
          }//END FUNCTION BINDINFOWINDOW
        
            function doNothing() {} //For request.onreadystatechange

By the way, I’m catching those values from an online database, we don’t have to mind that, they’re all working fine, the only problem is how to customize an infoWindow.

Please help me. Thanks.

ADD: I forgot to say that I will insert this into an android application. I’m using webview.

Answer 1

The content that you pass to an InfoWindow may be: text, HTML, or a DOM element. The InfoWindow is by default sized to fit whataver content you pass, so the best way to control the content the way you describe is to create a div, assign a CSS class to the div, and then you will have complete control over the appearance of your InfoWindow content.

Also, if you want to have more control over the actual appearance of the window structure itself, you may want to consider using the InfoBubble Utility Library as a stylable drop-in replacement for the standard InfoWindow.