Last year I wrote an article about how to change the default Google Map colours using CSS filters, it was very basic and unsupported in some browsers but it was the best you could do at the time. Google have now introduced version 3 of the Google Maps API which finally gives you control of each element, it allows you to define the exact colours, hue, saturation and much more.
Although it is slightly harder to get up and running with over the embedded iframe I would advise anyone looking to customise their maps to use this method instead of CSS filters.
Recently I had the need to recreate the clever content reveal layout used in the new iTunes 11 and the Google images design, there didn't appear to be anything in the jQuery community that could do the job and the approaches used by Google and iTunes were too heavyweight for what I was looking for. It was time to hit the drawing board and build a plugin for myself.
The result is Respringboard.js which is up on Github right now, named after one of the first appearance of this kind of design on the iOS app Springboard with one huge difference, it's completely responsive and adjusts to the size of the browser window making it prefect for desktops or mobile devices alike.
We all know and love google maps, its definately the easiest way to embed an interactive map into any webpage, the standard colour scheme has never been to my liking though and it looks more dated everyday, it also completely clashes with the colour scheme of a website on some occasions.
It suddenly dawned on me that I could use the new CSS3 filter style to change the colour scheme to greyscale, that way we have the same great google map only black and white. It is a little known fact that the filter style doesn’t just work on images, it will quite happily work on almost anything including the google maps embedded iframe!
Thankfully theres a cool way to force the browser to refresh the file when you have made a change, we can do this by appending some query string to the end of the file name, this query string doesn’t need to actually do anything its just a neat little trick to make the browser think it is a different file and load the new version.
In the past few years we have had an explosion of different devices, browsers and platforms with varying capabilities along with a vast array of new & experimental CSS3 and HTML5 tools and effects. This has given most web developers a huge headache, either we try the new effects and spend days targeting and debugging in every browser and device or choose not get involved in the new tools altogether and miss out.
Thankfully there is a solution, instead of targeting each browser which really isn’t an option anymore we can use Modernizr.js. This simple file will detect the device and browsers capabilities and allow you to take control of what features are enabled depending on what the browser and device can handle. As a real world example I’ve used Modernizr a number of times on this site to detect if a device has touch abilities and disable hover effects and allow swipe/touch events in the sliders.