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:

return apply_filters( 'embed_googlemaps', "<iframe width='{$width}' height='{$height}' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='{$url}&output=embed'></iframe>" );

…to this …

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>" );

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:

$('iframe.google_maps_oembed').wrapAll('<div></div>');

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:

echo apply_filters('the_content', $string_containing_url);