Responsive Google Maps

Onlangs heb ik een nieuwe jQuery plugin geschreven: FitMaps. Met de FitMaps plugin maak je een kaart van Google Maps op je webpagina flexibel, in plaats van een vaste grootte.  Met andere woorden: ’responsive’ Google Maps. Bekijk de demo en download de plugin op deze site via Handig & leuk > Tutorials of klik hier.

Wat doet de plugin? Op Google Maps kun je je eigen kaart met plaatsmarkeringen en infoballonnen maken, via ‘Mijn plaatsen’ / ‘My places”. Je kaart kun je vervolgens opnemen in een website door het kopiëren-plakken van een stukje HTML, de embed-code. De embed code van Google Maps maar ook bijvoorbeeld van videowebsites als YouTube of Vimeo is een iframe. Voor een responsive website, een site die goed leesbaar is op zowel een kleine smartphone als een grote monitor, levert een iframe problemen op. Een iframe is niet flexibel, maar heeft een vaste grootte in pixels. De volgende css-eigenschappen die je normaal in een responsive website zou gebruiken werken wel voor afbeeldingen maar niet voor iframes:

video {
	max-width: 100%;
	height: auto;
}

Iframes hebben daarentegen wel de volgende css-eigenschappen:

.video iframe{
	width: 100%;
	height: 100%;
}

Dit leidt tot de volgende css-truc: plaats de Google Map embed code in een <div> element en laat het iframe de <div> 100% in zowel de breedte als de hoogte vullen. Het <div> element kun je vervolgens wel laten meeschalen met de rest van de website. In em’s of in percentages. De FitMaps plugin verpakt alle Google Map embeds automatisch in een <div> en past de juiste css-eigenschappen op deze <div> toe.

De FitMaps plugin is overigens een aanpassing van de FitVids jQuery plugin, waarmee je video embeds flexibel maakt.

Voeg deze pagina toe aan: