The Lodge is members-only web design and development videos and live help. Log In or Sign Up.
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
Certainly you could skew the map…but it would skew **everything** including the marker.
The icon wil be something outside google maps
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.
>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.
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 -_-
Right now i got this not really what i want but it is getting closer
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.
> 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
> You can’t use skew to get a trapezium shape afaik.
You can! http://jsfiddle.net/rudiedirkx/349×9/
Here…not skew….transform: http://codepen.io/anon/pen/krdEz
> 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
>You’re slow! :P
True…I was delayed by neatening up the code & making it look good for presentation. :)
You must be logged in to reply to this topic.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed