Embedding Google Maps IFRAME - asp.net-mvc

Question

I can't seem to get this to work, while I have been doing so in the past, succesfully...
I'm trying to embed a Google Maps iframe in a web page. The iframe won't load, showing an error message, saying:
Chrome, in console: Refused to display document because display forbidden by X-Frame-Options.
IE9, on the page: This content cannot be displayed in a frame
The steps I take are:
Go to google maps in the browser
Go the place I want to have embedded
Click the link icon
Copy paste the link that's presented under the label 'Paste HTML to embed in website'.
I'm using ASP.NET MVC4, running locally in IIS Express, but the same happens on the server in IIS7.
Strangely enough, when I just create a local HTML file and open that from the filesystem, I don't have the problem.
When pasting the code in jsfiddle, it does seem to work.
Do I need to configure IIS or add something to my headers, or anything like that?
The HTML snippet
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.be/maps?f=q&source=s_q&hl=en&geocode=&q=Kortrijk,+Belgium&aq=0&oq=kortrijk,+bel&sll=50.802805,3.279785&sspn=0.351067,0.617294&t=h&ie=UTF8&hq=&hnear=Kortrijk,+West+Flanders,+Vlaams+Gewest&ll=50.802897,3.280106&spn=0.350496,0.617294&z=11&iwloc=A&output=embed"></iframe>

Answer 1

Thanks to the sharp and insightful eye of a colleague of mine, we have found the issue.
First of all it only seems to appear on the Belgian maps, http://maps.google.be, (afaik, obviously), and not on the http://maps.google.com.
When calling the IFRAME content, google redirects the IFRAME content to the same URL, but with ?wmode=transparent appended.
The browser does not allow multiple '?' in a url, so it aborts the action.
To fix:
Use the same URL as generated by Google Maps, but just append the following:
&wmode=transparent

Answer 2

Do you definitely have the &output=embed querystring parameter in the iframe source? If you don't include that then Google won't send the correct X-Frame-Options response headers and you get the error you've described.
Can you show the snippet of the MVC view where the map is being rendered?

Answer 3

I couldn't get any of the various suggestions around the web to work for embedding a google map link in an iframe.
I ended up using the google map API, generating the initial code by filling in the boxes at:
http://www.map-embed.com/
and modifying the resultant code to suit my purposes.
You could use the link above to gen the code for your own map, and then optionally use my code with the longitude and latitude produced by the above web site copied into my code. You can also insert your own html into "content" below, independent of what the above website produces.
<?php
// IE won't work with percentage height and FF won't work with em units.
// Simple code here assumes if browser isn't IE, then is FF;
// And I don't care about other browsers.
//
$height = "$browser" == 'ie' ? '25em' : '99%' ;
$width = "$browser" == 'ie' ? '99%' : '99%' ;
echo <<<XXXEODXXX
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<div style="height:$height; width:$width; overflow:hidden;">
<div id="gmap_canvas" style="height:$height; width:$width;">
</div>
<style>
#gmap_canvas
img
{
max-width:none!important;
background:none!important
}
</style>
</div>
<script type="text/javascript">
google.maps.event.addDomListener ( window, 'load', init_map );
function init_map ()
{ var myOptions = { zoom:12, center:new google.maps.LatLng ( 41.1889495, -104.1781593 ), mapTypeId:google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map ( document.getElementById ( "gmap_canvas" ), myOptions );
marker = new google.maps.Marker ( {map: map, position: new google.maps.LatLng( 41.1889495, -104.1781593 ) } );
infowindow = new google.maps.InfoWindow ( { content:"<b>Biz Name</b><br/>Biz Street Address<br/>Biz City, State Zip<br/>Biz Phone" } );
google.maps.event.addListener ( marker, "click", function () { infowindow.open ( map, marker ); } );
infowindow.open ( map, marker );
}
</script>
XXXEODXXX;
?>