Responsive Google Map Mashups and GIS (Part 1)

I was playing around with Responsive Google Map Mashups and learning about Geographic Information Systems (GIS) this morning. As an experiment, I mapped out the four store locations of my client, F. Oliver’s Oils and Vinegars in Google Maps.

The coolest part is, the data is pulled from your Google Drive account, so you can edit the map at any point and your embedded map will automatically be updated. This is great, because Penelope has this habit of opening up a new store every year or so. 🙂

You can click on the title header to reveal (and hide) more details, and each individual pin can contain it’s own unique title, description, driving directions, URL, and a photo. You can even add your own unique “pin” icon…I added an icon of one of her EVOO bottles. Super simple, and no access to Google API keys required.

How to Make a Google Map iFrame Mobile Responsive

Out of the box, Google’s embedded map snippet is non-responsive, but it’s easy enough just to wrap a DIV around it to fix that. I added the code inline right here within the WordPress editor, but best practice would be to add the following CSS rule to your website’s stylesheet. I did notice that the photos within each pin do not resize, so on my iPhone the photo entirely fills the screen and renders the map almost unusable. I did leave the photos in (above example) for illustration purposes, but in a production environment we would need to design something more useful for smaller mobile devices.

.map {
	height: 0;
	overflow: hidden;
	padding-bottom: 65%;
        margin-bottom: 1em;
	position: relative;
.map iframe {
	left: 0;
	height: 60% !important; /*pick your own height*/
	position: absolute;
	top: 0;
	width: 100% !important;

Next up….Advanced Map Mashups using Excel spreadsheets and Google Fusion Tables.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *