Fake 3D(skew) Google maps

[mvaneijgen]

I have this idea to embed google maps on a site but i like to skew it. I have made a sketch what i think it should look like [see here](https://www.dropbox.com/s/pwkul7keuhh1urm/2013-03-15%2011.18.55.jpg “see here”)

I am not sure if its possible, im not a developer just like to think about impossible stuff.

Let me know

[Paulie_D]

Certainly you could skew the map…but it would skew **everything** including the marker.

[mvaneijgen]

The icon wil be something outside google maps

[CrocoDillon]

You can use css 3d transforms, [bad browser support](http://caniuse.com/#feat=transforms3d) but that’s not really a problem if you take ‘graceful degradation’ into account. I think that one runs on GPU so that’s an added plus I guess.

[Paulie_D]

>The icon will be something outside google maps

Yeah…but how would you get it positioned (and maintain its position on map updates)?

>I am not sure if its possible, im not a developer just like to think about impossible stuff.

Not IMpossible…but if there was a demand…Google would do it..for free.

Wait…they do…don’t they in G-Maps Mobile?

In fact, can’t you do a flyover a route type things in G-Earth? It’s been a while.

[CrocoDillon]

Apparently you’re right: http://www.google.com/mobile/maps/3d/

Is this possible to do on desktop websites though?

Google Earth needs a plugin -_-

[mvaneijgen]

Right now i got this not really what i want but it is getting closer

[http://cdpn.io/nzKdH](http://cdpn.io/nzKdH “http://cdpn.io/nzKdH”)

[CrocoDillon]

You can’t use skew to get a trapezium shape afaik.

Try this: `transform: perspective(400px) rotateX(45deg);` (with prefixes)

If you find out how to target labels you can probably transform those back to normal.

[mvaneijgen]

> Yeah…but how would you get it positioned (and maintain its position on map updates)?

This will always be the middle of the map so thats easy

[mvaneijgen]

> You can’t use skew to get a trapezium shape afaik.

You can! http://jsfiddle.net/rudiedirkx/349×9/

[Paulie_D]

Here…not skew….transform: http://codepen.io/anon/pen/krdEz

[CrocoDillon]

> You can! http://jsfiddle.net/rudiedirkx/349×9/

That’s not skew, in fact that’s not even a real transform. You can see if you put some white text in there that it’s just an [illusion](http://jsfiddle.net/349×9/1854/).

> Here…not skew….transform: http://codepen.io/anon/pen/krdEz

You’re slow! :P

[Paulie_D]

>You’re slow! :P

True…I was delayed by neatening up the code & making it look good for presentation. :)

[Author]

Posts