You are viewing an old revision of this post, from July 8, 2013 @ 14:18:27 [Autosave]. See below for differences between this version and the current revision.

Add responsive Google Maps oEmbeds to WordPress

This is a solution I have researched and created based on a few pre-existing components. Firstly, use this to add Google Maps oEmbeds to WordPress: https://github.com/wpsmith/google-oembed I made one change to the code, I changed the following line by added a class to the Google Maps iframe, you will see why later. Change this line: [php]return apply_filters( 'embed_googlemaps', "<iframe width='{$width}' height='{$height}' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='{$url}&output=embed'></iframe>" );[/php] ...to this ... [php]return apply_filters( 'embed_googlemaps', "<iframe class='google_maps_oembed' width='{$width}' height='{$height}' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='{$url}&output=embed'></iframe>" );[/php] Secondly, this css will make Google Maps iFrames responsive: http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/ The third part of the equation is adding a div tag and class around the Google Maps iframe which allows the css to work it's magic. I used the following jQuery to wrap a div and class around any Google Maps iframe with the class we added earlier to the plugin code: [js]$('iframe.google_maps_oembed').wrapAll('<div></div>');[/js] Lastly, I have used the following php to embed a Google map (set via custom meta field with a Google Maps URL input), simply get the Google Maps url set as a variable and then echo the following: [php]echo apply_filters('the_content', $string_containing_url);[/php]

Revisions

Revision Differences

There are no differences between the July 8, 2013 @ 14:18:27 [Autosave] revision and the current revision. (Maybe only post meta information was changed.)

No comments yet.

Leave a Reply