Google Maps inside iframe not loading

Question

I ran into a strange issue, and I don't know what the problem is. The following jQuery code is a simplified version of what I want to achieve:

var iframe = $('<iframe />'); iframe.prop('src', 'https://maps.google.com/maps?q=London&hl=en&sll=37.0625,-95.677068&sspn=46.677964,93.076172&t=h&hnear=London,+United+Kingdom&z=10'); iframe.appendTo($('body'));   // When the iframe loads: iframe.load(function() {     alert(1); }); 

The map is never loaded, and the load() event is never triggered. Chrome reports the following error:

Refused to display 'https://maps.google.com/maps?q=London&hl=en&sll=37.0625,-95.677068&sspn=46.677964,93.076172&t=h&hnear=London,+United+Kingdom&z=10' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

How does one bypass this?

Here's a jsFiddle demo.

Answer 1

Appending &output=embed to the end of the URL fixes the problem.

Update: Google disabled this feature, which was working at the time the answer was originally posted. This solution no longer works.