'Flat design'-inspired Google Maps using the API

When it comes to map styling I think cloudmade did a much better job than google http://maps.cloudmade.com/editor . I use them along with leaflet.

The other thing that is different is that the subtle borders around city blocks and things like that are gone. Those borders help increase contrast, making things easier to distinguish.

This is hacker news. People hack to hack. I don't understand your question.

Yes, I have to wonder if this was done as sarcasm, too. It makes all those comments that flat design doesn't convey enough information, and makes everything indistinguishable, so true. It makes it very hard to understand what I'm seeing.

I think there should be a new term being coined, such as "flat design extremism", and it should be used as an example of how not to do things. Surely not everything perfectly flat is a good thing?

I guess for inspiration, be it of design or anything else.

For me, this deconstruction of a busy map normally filled with labels and places, colored with flat UI style colors that contrast each other and without the visual noise of borders, invites me to build upon it and perhaps start displaying a new layer of data on it.

@cleverjake is right. It's a hack. Who cares why? It's play! It's fun. It looks cool, and I wouldn't underestimate the ability for "useless toys" to inspire really compelling and useful projects.

Hell, I'll even go ahead and play devils advocate and pitch a potential commercial usage for this in the friendly spirit of attacking your cynicism on two fronts :) -- I could imagine an app/site that uses this as a basic to create simple and stylized maps that are suitable for poster-hanging. I see lots of simplified stylized maps that do things like list all of the beach towns or surf breaks along the coast in my area. This could be used to create maps of everywhere in the neighborhood that might be compelling to a child (parks, their friend's houses, the beach, etc).. You could choose icons for the map points, tweak the color palette with a fun drag-tool and order a print... Or make a treasure map for a kid's birthday party. (Obvious potential legal issues using gmaps for this which I won't bother to look into withstanding).

At any rate, I think it's an awesome project, whether or not it has obvious and immediately convertible value... and if someone did a good job building a site as described above, I'd be an immediate customer.

It made you, and others, think. So at the very least I would argue that it is art.

I like it. A nice use case would be a quiz, for example. "What place does this map show?"

I would actually not be surprised if Google Maps looked like this someday.

Except, you know...more useful. Like street names? :)

I truly believe that this was made to satisfy some requirement of a project, or it might have been just for fun. Either way, it's not a bad way to embed a map in a site designed using the "flat" aesthetic.

...But you probably should link to the real Google Maps so people can see where in the hell they are!

There's a lot you can do:

http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/...

Feel free to click the edit button on the upper right corner of this JSBin link and see for yourself. It's easy peasy and will amaze you in how simple it is to modify Google Maps! :)

Wow. I saw this and thought "that's what's wrong with flat UI."

From this, I now gather that flat UI is a reduction tool. That's effective when you want to show something simple, and make that simplicity clear. But when you have something more complex, like a map, the bandwidth lost to the reduction is substantial and painful.

It used to be popular to make buttons 3D with gradient effects, gloss, and borders, both windows and buttons to have drop shadows, and also to use real world textures like leather and paper, and text labels and calls to action. This stems from a lot of research into user efficiency that showed users completed tasks easier and quicker and with higher satisfaction if the buttons looked like they stuck out and were pressable, had good labeling, etc..

Flat design basically gets rid of all this. It hasn't fared well in my own user studies. Users tend not to hit a button if it is just a flat icon tucked in a corner with nothing to clue them in that they should be hitting it or what it does. You are generally stuck in the first revision to put a tutorial overlay with a big arrow and text the first time the user comes to the screen.

The lack of text in this so you can't tell what any street is? That's very flat UI style. They hate text that clutters up their designs and tells people what things actually do. Proponents of flat design generally base their decision on the fact that it looks better to graphics designers looking at the app (instead of using it).

That's a little harsh for someone sharing their playing around. If you were going to do it as a thing, I suspect you'd make it more like Bing maps. Which is a really nice site and gets used when I'm on a computer - Just a pity they don't have an android app :p

as someone who does have blue-green colorblindness - I can't tell whether or not there are colors I'm not seeing.

> that marker shadow looks weird.

Cognitive dissonance with the UI control shadows (light source, blur radius)