Styling InfoWindow with Google Maps API

Question

I'm currently working with Google Maps, and everything works fine by now. But I want to change the styling of the InfoWindow. I have been researching, but haven't find anything useful yet to help me understand InfoWindow (not even the API Documentation.)

So; how do I change the styling like colors, background, borders and etc. of the InfoWindow box in my map?

Thanks in advance.

Heres my code:

<!DOCTYPE html>
<head>
    <title>Google Maps Example</title>
     <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
     <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 font-family: Helvetica;}
      #map_canvas { height: 100% }
      .InfoWindow {
      background: #000;
      }
    </style>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var infowindow = null;
    $(document).ready(function () { initialize();  });

    function initialize() {

        var centerMap = new google.maps.LatLng(59.9149, 10.72974);

        var myOptions = {
            zoom: 14,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        setMarkers(map, sites);
        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });
    }


    var sites = [
    ['Mount Evans', 59.934615,10.743392, 4, '<div class="InfoWindow"><b>This is Mount Evans.</b></div>'],
    ['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
    ['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
    ['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
    ];

    var image = new google.maps.MarkerImage(
      'http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-8c4eb8/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/bar.png',
      new google.maps.Size(30,37)
    );

    function setMarkers(map, markers) {

        for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4],
                icon: image

            });

            var contentString = "Some content";

            google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
</script>
</head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

Edit: It does not look like it's possible to style InfoWindow (just the input). However, Infobox makes this possible.

You may want to visit [Link](http://stackoverflow.com/questions/3610884/changing-background-color-in-google-map-infowindow) — Ankit, Feb 28 '13 at 17:07
you can also do it with the [**InfoBubble**](http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html) too (same site). — johntrepreneur, Mar 14 '13 at 23:19
You can also use jquery to do it by setting an id on your content and then using the .parent() method to get a handle to it. I've used this for simple stuff before, but it has some drawbacks. — johntrepreneur, Mar 14 '13 at 23:22
`InfoWindow`is not very style-able. To really do whatever you want, you might want to check out `InfoBox` instead. It allows you to use your own HTML/CSS to create an info window (whereas `InfoWindow`only allows you to insert HTML/CSS inside it's own HTML code for the info window). Check out [this SO answer](http://stackoverflow.com/a/7628522/881250) for an example. — uɥƃnɐʌuop, Dec 14 '13 at 19:17
You could also give [Snazzy Info Window](https://github.com/atmist/snazzy-info-window) a try too. It supports responsive sizing, dynamic content, and styling via JavaScript, CSS, and even SCSS. We made it as part of [Snazzy Maps](https://snazzymaps.com) and decided to open source it for anyone to use! :) — Adam Krogh, Nov 14 '16 at 20:16

score 9 · Answer 1 · answered Feb 17 '16 at 18:44

9

use .gm-style .gm-style-iw classes for styling the text for example:

.gm-style .gm-style-iw {
   font-size: 16px;
   font-weight: bold;
   font-family: sans-serif;
   text-transform: uppercase;
}

answered Feb 17 '16 at 18:44

saqib kifayat

136
2
14

score 4 · Answer 2 · answered Sep 16 '13 at 05:38

You can change it with java script as below

var contentString = '<div style="width: 94.2%; padding-left:10px; height: 25px;float: left;color: #FFF;background: #ed1e79;line-height: 25px;border-radius:5px 5px 0px 0px;"><strong><b>"You feild"</b></strong></div><div style="clear:both;height:0px;"><div style="float:left;width:90%;padding:5px 10px;border:1px solid #ccc;border-top:none;border-radius:0px 0px 5px 5px;"><div style="float:left;color:#666;font-size:18px;font-weight:bold;margin:5px 0px;"> <div style="padding: 0px;">]]..product_list[i].category..[[</div></div><div style="clear:both;height:0px;"></div><div style="float:left;line-height:18px;color:#666;font-size:13px;">"You feild"</div><div style="clear:both;height:0px;"></div><form action=\"navigat:"You feild"\"><input type=\"submit\"/ style=\"background:#7e7e7e;float:right;color:#FFF;padding:5px 7px;font-size:10px;font-weight:bold;border:none;margin:5px 0px; border-radius:0px !important;\" value=\"More Info\" ></form></div></div>';  

  var infowindow = new google.maps.InfoWindow({content:contentString});

@ToniMichelCaubet It may take bit more code, so better to keep it short — Kirtikumar A., May 09 '16 at 09:51
The length of code it's not important, the readability does, dough.. — Toni Michel Caubet, May 09 '16 at 12:26

score -3 · Accepted Answer · answered Feb 28 '13 at 17:05

-3

From the API: https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows

The InfoWindow's content may contain either a string of text, a snippet of HTML, or a DOM element itself.

You can pass in styled HTML or you can create the InfoWindow itself, then pull it in JS as an object.

answered Feb 28 '13 at 17:05

Ross Joo

180
6

15

This doesn't seem to address the problem posed by the OP in any way. The problem here is styling the part of the infowindow that is generated by google, not the content you put in it, which the OP already knows how to style. And whatever you pass in as content, the problem doesn't change. Or am I missing something? – matteo Aug 04 '13 at 19:53

Styling InfoWindow with Google Maps API

3 Answers3

Linked