
'Flat design'-inspired Google Maps using the API - muratmutlu
http://jsfiddle.net/Blunk/x8dSP/8/embedded/result/
======
Stratoscope
For anyone who wants to experiment with styled Google maps, a good place to
start is the Styled Map Wizard:

[http://gmaps-
samples-v3.googlecode.com/svn/trunk/styledmaps/...](http://gmaps-
samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html)

(The UI is a bit odd; be sure to read the help panel before jumping in.)

Here's the documentation:

[https://developers.google.com/maps/documentation/javascript/...](https://developers.google.com/maps/documentation/javascript/styling)

[https://developers.google.com/maps/documentation/javascript/...](https://developers.google.com/maps/documentation/javascript/reference#StyledMapType)

Long-time Maps API developers may remember that using styled maps cut your
free usage limit to 10% of what unstyled maps allowed. This is no longer the
case; styled and unstyled maps have the same quota.

I found a more practical use for styled maps in the election results maps I
made for Google, turning off borders and country names, fading out parks to a
very pale green so they don't interfere with the result map colors, and
keeping highways visible but faint so there's a sense of place without the
distractions of a normal map. Example:

<http://www.google.com/elections/ed/it/results>

~~~
edouard1234567
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.

~~~
milliams
I personally find that MapBox's TileMill (<http://mapbox.com/tilemill/>) is
much better. The massive dataset of OpenStreetMap with complete flexibility.

~~~
fudged71
This is beautiful. Thank you!

------
polymathist
Google Maps is already "flat" in the sense that it doesn't use gradients or
shadows. (The exception would be the controls in the corner which have a
shadow, but that still exists in this example). The only thing someone did was
switch up the color scheme and remove all the text, i.e. everything that
actually makes a map useful. I fail to see the point of this. Could someone
explain?

~~~
ok_craig
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.

------
afandian
I genuinely wonder why this was done. To showcase why flat UI doesn't work? Do
show that it does? To parody the way people blindly use it for everything
without giving it much thought? Because the creator thought it was a good idea
and looked nice?

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

~~~
afandian
Well, it could be a clever parody. I initially thought it was, as this is also
the place people post that kind of material.

It could be a hack just for fun. People post that kind of thing here too.

It could be a proof of concept statement about how amazing flat UI colours
are. People post that kind of thing here.

Either way it would be nice to have a sentence of commentary.

~~~
muratmutlu
I posted it after I found it on Dribbble and thought it was interesting.

It looks like it was made in response to a shot someone posted on Dribbble
<http://dribbble.com/shots/1044275-Flat-Map>

It was rebounded and coded up, that happens quite a lot on Dribbble when devs
see a design they like and have a go at putting it into css/html etc

------
Swizec
Well that sure is pretty! If I zoom out long enough I can even realize that's
New York! Amazing. Brilliant. Bravo good sir. _applause_

------
habosa
How does one use the Maps API to change the appearance of the Map? I always
thought Google maps served somewhat static tiled images and we (developers)
could just place markers and other things at (x,y) coordinates.

~~~
sergiotapia
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! :)

------
tzury
That's very much like Google+ design for Google Maps.

I _love_ this design.

Wish one will do such quality job for bootstrap (there are some attempts but
non are yet high quality IMHT)

~~~
lallysingh
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.

------
vikram360
I haven't been able to wrap my mind around the whole 'flat' concept. Could
someone please explain what 'flat' really means. The only thing that I really
notice about flat design that stands out is the color scheme and the
don't-care-about-layers philosophy.

~~~
lnanek2
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).

~~~
ryanmerket
This. Flat design may look 'cleaner' but that doesn't mean 'easier to use'. I
echo your usability findings -- usability tests are showing flat design is
much harder to use.

------
jcoder
Cool idea & implementation. Ignore the haters.

------
hung
This looks cool and reminds me of the Stamen maps project.

<http://maps.stamen.com/#toner/12/37.7706/-122.3782>

------
ancarda
I can use maps that convey significantly less information. Just what I wanted.
I know everybody hates skeuomorphism, but I'd take it any day over a map like
this.

~~~
6d0debc071
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

------
handelaar
Neat, but speaking as someone who does _not_ have blue-green colourblindness,
it's hard to distinguish that greeny-blue from that bluey-green.

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

------
ldad
I had a lot of fun styling google maps for this project - voya.ge (still
beta). Early versions were very minimal like the example posted, but as the
project progressed the necessity for labels (street names, etc) became pretty
obvious.

also, not to be a hater, but isn't this conversation about flat design getting
kind of old?

------
zalew

      featureType: "road.local"
      stylers: [visibility: "on"]
    

otherwise this map is useless.

and that marker shadow looks weird.

~~~
lloeki
> _that marker shadow looks weird._

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

------
b3b0p
I like it and think it's beautiful.

Poster, do you mind if we borrow this and the marker images? I'd like to play
around with it.

------
seanlinehan
I dropped a pin and wound up in an art gallery. Cool project and a pleasant
surprise.

------
caoimhin
It's a flat design and yet you still have to make it 3d (the shadow for the
pin).

------
MRSallee
Watch out, you just made maps for the next Grand Theft Auto.

------
cddotdotslash
Pretty cool - although you may want to host your images somewhere other than
Dropbox - I think they put a limit on it after x number of hits.

------
randall
Nice experiment!

------
apunic
Just great

------
Evbn
"Flat" means "no text"?

------
_pmf_
Of all the great and awesome demos today, this is not one of those.

