I love minimal designs and try to create applications that make judicious use of the space they’re given on the user’s screen. For map apps, the Google Maps Javascript API includes “overlay” objects that you can anchor to the map, so that they move as expected when the user pans and zooms. The InfoWindow object is a pop-up box resembling a comic-book word balloon. Unfortunately, customization options are limited. I was frustrated by the fat margin around the content, and looked for other options.

The internet is flooded with other people looking for ways to customize the InfoWindow display. The best resource for add-ons that I found is the Google Maps Utility Library, an open-source collection of features that expand the Maps API.

The library offers two alternatives to the InfoWindow: the InfoBox and the InfoBubble. Each has a Javascript “JS” file that you link to from your main HTML file. The “minified” code for the InfoBox is 8 KB, while the code for InfoBubble is 16KB. The InfoBox offers both released versions and development versions, while InfoBubble has only development versions, meaning you should use it only if you’re prepared to deal with bugs that haven’t been ironed out yet. The InfoBox API reference gives it a further advantage; InfoBubble does not have any documentation other than an example.

I decided to try out the InfoBox library in my CaBi Trip Visualizer. I copied the library and added this line in the head section:

<script src="../lib/infobox_packed.js" type="text/javascript"></script>

I have a gloabl variable called infoBox:

var infoBox;

The original code using Google’s built-in object looked like this:

infoBox = new google.maps.InfoWindow({disableAutoPan: true});

That gets replaced with:

var boxOptions = {disableAutoPan: true,
  alignBottom: true,
  closeBoxURL: "",
  maxWidth: 0,  // no max
  pixelOffset: new google.maps.Size(-140, -12), 
  infoBoxClearance: new google.maps.Size(1, 1) 
infoBox = new InfoBox(boxOptions);

When I’m ready to present the infobox, I use code like this:

infoBox.setContent("Any HTML you want");
infoBox.open(map, marker);

The result is on the right (I didn’t bother showing the HTML that draws the table with the red heading). While this let me get rid of the annoying padding inside the infowindow, I lost the infowindow’s cool shadow and the window’s tapered stem, where the tip points to the object it’s anchored to.

The infobox example replaces the tapered stem with a pointy shape attached to the window’s border, but I found the effect unsatisfactory. It uses the boxStyle property to add a triangular image to the background. I decided I could live without an arrow tying the window to its marker, as much as I’d prefer one.

Though the infobox object doesn’t offer a shadow, we can use CSS to give a shadow to the content of the infobox. The box-shadow property does the trick. I put it in an inline style in a div tag that contains my content:

blurb = "<div style='box-shadow: 12px 12px 8px 4px rgba(0,0,0,0.4);'>" +
  "Any HTML you want</div>"
infoBox.open(map, marker);

boxwshadowMuch better! This example puts a shadow 12 pixels to the right and 12 pixels below, with a blur radius of 8 pixels and a spread radius of 4 pixels. To make the shadow transparent, I use the rgba(red, green, blue, alpha) color syntax.

With the added CSS chadow effect, the infobox becomes a worthy replacement for the infowindow. The infobox library is a worthwhile addition, but only until Google finally upgrades the standard API to include more customization options for the standard infowindow object.

To read more about this particular application, the CaBi Trip Visualizer, see Capital Bikeshare’s 4th Quarter of 2012 and Bikeshare Stats on a Map.

An Alternative to the InfoWindow

One Response to “An Alternative to the InfoWindow”