Revision 425 is a pre-publication revision. (Viewing current revision instead.)

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

April 28, 2013 @ 13:39:43Current Revision
Content
Unchanged: This is a solution I have researched and created based on a few pre-existing components.Unchanged: This is a solution I have researched and created based on a few pre-existing components.
Unchanged: Firstly, use this to add Google Maps oEmbeds to WordPress: <a href="https:/ /github.com/wpsmith/ google-oembed" target="_blank" >https://github.com/wpsmith/ google-oembed</a>Unchanged: Firstly, use this to add Google Maps oEmbeds to WordPress: <a href="https:/ /github.com/wpsmith/ google-oembed" target="_blank" >https://github.com/wpsmith/ google-oembed</a>
Unchanged: 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.Unchanged: 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.
 Added: Change this line:
 Added: [php]return apply_filters( 'embed_googlemaps', &quot;&lt;iframe width='{$width}' height='{$height}' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='{$url}&amp; output=embed'&gt; &lt;/iframe&gt;&quot; );[/php]
Deleted: ChAdded: ...to this ...
 Added: [php]return apply_filters( 'embed_googlemaps', &quot;&lt;iframe class='google_ maps_oembed' width='{$width}' height='{$height}' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='{$url}&amp; output=embed'&gt; &lt;/iframe&gt;&quot; );[/php]
Unchanged: Secondly, this css will make Google Maps iFrames responsive: <a href="http:// themeloom.com/ 2013/02/tips- embed-google- maps-and-calendars- in-a-responsive- wordpress-theme/" target="_blank" >http://themeloom.com/2013/ 02/tips-embed- google-maps- and-calendars- in-a-responsive- wordpress-theme/</a>Unchanged: Secondly, this css will make Google Maps iFrames responsive: <a href="http:// themeloom.com/ 2013/02/tips- embed-google- maps-and-calendars- in-a-responsive- wordpress-theme/" target="_blank" >http://themeloom.com/2013/ 02/tips-embed- google-maps- and-calendars- in-a-responsive- wordpress-theme/</a>
Unchanged: 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.Unchanged: 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.
 Added: 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:
 Added: [js]$('iframe.google_ maps_oembed') .wrapAll('&lt; div&gt;&lt;/div&gt;');[/js]
 Added: 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:
Deleted: I used the followingAdded: [php]echo apply_filters( 'the_content', $string_containing_url);[/php]

Note: Spaces may be added to comparison text to allow better line wrapping.

No comments yet.

Leave a Reply