I'm having a trouble using space in Google Maps InfoWindow. I am required to display the building address, image, two (2) sentences about the building, and a couple of icons near the More button.

What is the correct way, in terms of tested visual design, to display the information in the given, small, space?

Google Maps InfoWindow with title, building image, building address and descriptive text

  • 1
    good editing :-) making our answers king of wired... Commented Apr 26, 2013 at 19:32
  • 1
    *kind of wierd?
    – elemjay19
    Commented Apr 26, 2013 at 19:35
  • That is parapraxis, I feel like a connexion with Roger Attrill. Another excuse is that I am french so I suck in english :-) Commented Apr 27, 2013 at 9:55

3 Answers 3


I think the problem is not just down to the whitespace itself (whitespace is good), but the alignment and spacing of the items in the infowindow. In particular the rather raggedy right hand side and also around the title area where there is also a little more whitespace than necessary in proportion to the rest of the window.

You could try layout out the elements to give cleaner more aligned edges and the whole result will fill neater. You could also try banding the description area background to give the more button (and icons) a sense of their own space, and to draw out the ragged right hand edge of the text to the side of the box. You could also justify the text, but that has other issues with readability and awkwardness of spacing on narrow columns.

As you can see from the bottom of the map, I was able to shunt the vertical size down by 20px meaning slight less of the map is lost behind the window.

I don't think you need to worry too much about whitespace under the address, especially as addresses vary in length and complexity. And in any case there's also scope there to add other information (eg telephone number, popularity/importance rating, links) without further affecting the layout.

enter image description here

If you want to find out more about this sort of thing, read up on the Gestalt laws of grouping, continuance, proximity, closure, and related laws such as that of common regions and connected elements and I can't recommend enough the Universal Principles of Design by Lidwell, Holden and Butler.

  • 1
    What a great response!
    – max
    Commented Apr 26, 2013 at 17:14
  • 1
    Indeed it is, now I am ashamed of mine :-) Commented Apr 26, 2013 at 17:17
  • What does banding means?
    – max
    Commented Apr 26, 2013 at 17:42
  • Thank you - and you are welcome! :-) By banding I just meant to stretch a rectangle behind the description from one edge of the window to the other, creating a band right the way across - the pale yellow area in the example above. Commented Apr 26, 2013 at 17:55

We had a similar conversation when creating the InfoWindow for the BCParks map. BC Parks asked for the park name, park class, established date, description, reservation link, park photo and 4 park amenity icons to be displayed. ex.


For JusticeBC, we focused on also providing a clean look on mobile devices. In this project I used the screen width to modify the layout of the InfoWindow. For desktops the InfoWindow would behave like the BCParks example and for narrower (mobile/tablet) devices, the image would be placed below the courthouse information. ex.



There is no such thing as an unused space*.

Try that :


*I recommend you this article of Mark Boulton about whitespace

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.