CSS: stylizing a Google Maps InfoWindow

In the Google Maps terminology, an InfoWindow is a JavaScript object that provides some information on a place or location. This object takes the form of a big static tooltip with a shadow covering a portion of the map. The interesting thing of this feature is that an InfoWindow object can accept any kind of content (e.g. markup) defined by the author of the map. In other words, you can insert images, embedded external content, text and any other type of markup. In this post I'm going to show you how to stylize such content. I'm not covering the details of how to create a Google Map using the latest API version 3. If you need some specific information on this subject, I recommend you Beginning Google Maps API 3, an excellent book.

The map I've created for this example shows the location of Vasto (Italy), my hometown. As you will see, this map is provided with a marker that points exactly to this town. When a user clicks on that marker, an InfoWindow is shown, with an image and a caption inside. Just for the theory, this is the markup structure inserted in this object:

var img = '<div id="pic"><img src="https://lh6.googleusercontent.com/_rhuioznu6Us/TU-MTMhCYGI/AAAAAAAAAQs/WJw-khN02AI/s144/vasto-1967.jpeg" width="268" height="188" /><p>Vasto Marina, 1967</p></div>';

So we have a div with ID pic, an image and a paragraph. First of all, however, we need to stylize the main container of the map, like so:

#map {
  width: 600px;
  height: 500px;
  margin: 2em auto;
}

The map will be centered on the browser's window. A Google Map is elastic: all its content will be contained within the dimensions we've specified in our first CSS rule.

Now the InfoWindow. Bear in mind that the dimensions of this kind of element are actually determined by the dimensions of its content. So if your content is 300 pixels wide, then your window will be 300 pixels wide. If you specify a dimension that is larger than the global map's dimensions, then your window will be resized to fit the map. In other cases, scrollbars may appear to make all your content accessible.

Here's our CSS:

#pic {
  width: 400px;
  height: 190px;
  padding: 5px;
}

#pic p {
  margin: 0;
  text-align: center;
  font: italic small Arial, sans-serif;
  float: left;
}

#pic img {
  display: block;
  width: 268px;
  height: 188px;
  float: left;
  padding-right: 5px;
}

A simple step on a static web page, a giant step on a Google Map! First we've set the global dimensions of our container by also specifying a height plus some padding. Specifying precise dimensions in our case is a good thing, because we're dealing with the predefined dimensions of an image. Then, we've used floating to make both the image and the paragraph appear on the same line. As you can see, the image has also some right padding to keep it separate from the paragraph's text. You can see the final result in the demo page below.

Demo

Live demo