Responsive Google maps embeds « Waywayway Websites Apps en Sencha Touch

Responsive Google maps embeds

A lightweight, easy-to-use jQuery plugin for fluid width Google maps embeds. FitMaps achieves fluid width maps in your responsive web design.

How do I use it?

Download source files. In your html, link to these scripts in the <head> tag, jQuery library first, then jquery.fitmaps.js, like this:

<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.fitmaps.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
     // Target your .container, .wrapper, .post, etc.
     $("#thing-with-maps").fitMaps();
   });
</script>

This will wrap each Google map embed iframe in a div.fluid-width-maps-wrapper and apply the necessary CSS. After the initial Javascript call, it’s all percentage-based CSS magic.

You can call the plugin with two options:

h: a string for the css height property, e.g: ’100%’, ’75%’ or ’250px’
w: a string for the css width property, e.g: ’100%’, ’75%’ or ’250px’

Calling the plugin with options would look like this:

$("#thing-with-maps").fitMaps( {w: '100%', h:'250px'} );

This jQuery plugin is based on the FitVids plugin.