9

Here is what happens when you click on an icon in an "old-style" Google map:

old Google Maps

You get an InfoWindow, and clicking "more info" opens a new tab with a google search of the icon's subject.

Here is what happens when you click on an icon in a "new-style" Google map:

new Google Maps

You get more information outside the map that you can then interact with.

I understand why the new way is better- you can show more information, it's more mobile-friendly, and it helps de-clutter the map.

My question is: Is there a specific material design guideline that motivated this change from the old InfoWindow style to the new "sidebar" style? I doubt there's something as obvious as "don't use InfoWindows on maps anymore, use this instead", but I'm looking for something a little more official than me just guessing.

Bonus question: What is that sidebar component called?

The reason I'm asking is: At my job we have a product that uses the Google Maps API to show various hierarchical information:

  • You click on a dot on the map
  • That pops up an expanded view of the data on the map
  • You click in the expanded view and you get an InfoWindow with more details.

My job's clients don't like the InfoWindow display, and I'm thinking that we should get away from on-the-map displays and move towards this new-style sidebar interface. I'm looking for something a little more official than my humble opinion, but nothing in the material design docs really jump out at me.

2 Answers 2

9

tl;dr: It's a sheet.

The pattern is related to the persistent bottom sheet element on mobile. The MD guidelines actually reference the map example specifically when explaining this approach:

On desktop, content ordinarily presented in a persistent bottom sheet might move onto a new sheet of material. On larger screens it may be more appropriate to display bottom sheet content on a sheet of material positioned on the left side of the interface.

enter image description here

The map implementation has morphed a bit since Android 6 came around (it's attached to the left, top, and bottom), but the basic idea is the same.

As you've keenly observed, Google got away from the old info window approach because it messed up your view of the area of interest.

4
  • Thanks for the reply. I guess what I'm looking for is a more definitive source on why google switched from InfoWindows to the sheet approach. You and I can both give our reasons why the switch makes sense, but I was really hoping to send something a little more "official" up the food chain. Jan 7, 2016 at 18:29
  • Isn't 'Google doesn't do that any more' enough for upper mgmt? Jan 7, 2016 at 18:43
  • 1
    Hahaha, fair enough. I'll accept your answer, but I know that as soon as I say "google switched away from InfoWindows" the question will be "but why did they switch?" Jan 7, 2016 at 19:23
  • Because Google knows all! Jan 7, 2016 at 19:24
0

This material design pane is Sheet righly said by @plainclothes. If I go more technical, then previously Google was not providing support for this Bottom-Sheet that appear in mobile devices which came from left in Tablet devices.

But now in Feb 2016 Android is providing support for Bottom-Sheet to Developers in his API version 23.2

Your Answer

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

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