Responsieve, geannuleerde Google Map-afbeeldingen

Hoe is dat voor een trefwoordverpakte titel? Laten we eens kijken naar Google Maps - meer specifiek, een alternatieve manier om ze op uw websites op te nemen. We zullen responsief werken (natuurlijk) en we zullen een media-query bekijken die ons ook zal helpen met Retina-schermen.

Dit is een techniek die een belletje kan doen rinkelen als je ooit een grensradius hebt toegepast op een afbeelding (voordat het daadwerkelijk mogelijk was om een ​​randstraal toe te passen op een afbeelding). Het houdt ook rekening met een deel van de recente discussie over sprites en retina-displays.

Bekijk Screencast

Of download de video of abonneer je op Webdesigntuts + screencasts via YouTube

Aanvullende bronnen

• Statische Maps API V2-gids voor ontwikkelaars
• Optimalisatie voor hoge pixeldichtheidsdisplays door Edward Cant
• CSS Sprites gebruiken om uw website te optimaliseren voor Retina Displays door Maykel Loomans
• Retinafy uw websites & apps door Thomas Fuchs

Een laatste opmerking: Een kwestie die het gebruik van deze techniek zou kunnen belemmeren, is het auteursrecht. Door de auteursrechtvermelding te verdoezelen die we tegen de gebruiksvoorwaarden hebben ingediend, is het misschien verstandig om een ​​alternatief onder de afbeelding op te nemen, in dit geval Kaartgegevens © 2012 Google, Whereis®, Sensis Pty Ltd. Dat gezegd hebbende, kan ik niet garanderen dat Google dat prima vindt ...