Popover vs Modal to display a map

Question

I'm working on a small mockup for a list of items where each of them has a map. I think that directly displaying the map for each item will be a little bit overbloated for the users so I'm thinking on hiding it behind a link that will open it.

This is how an item looks like:

And this is with the popover:

And with the modal window:

What would be the best from the user point of view, considering that a page might list around 20 items? Open the modal each time that the user wants to see the map of one item or just show it in a popover?

Is there any better solution?

Answer 1

It depends on how a user uses a map, e.g. on use case. Describe what are you expecting from user to do with a map. Does he need to carefully study a map and maybe browse another locations? Does he need only to have a quick look at the map? Does he need compare locations of different items?

Also both your solutions force user to do one more action - close a map. You should take this into account as this may become annoying when you open and close 20 maps at one page.

In my opinion you have two more options:

1. Open inline map, i.e. somewhere inside your item.
2. Open map in new tab/windows.

In both cases you can avoid closing a map - in the first case you can do it automatically when another item's map opens, in the second case - another tab is served outside your page.

So, it's possible to give user options, e.g. inline, popup, new tab.

Also, take in mind that map itself takes time to load, so new tab is not bad option for this case since it's done asynchronously. Also, inline map could be fast loaded as static image (in case your map service provider has this feature and it's appropriate for your use case).