Embedding Google Maps: ‘X-Frame-Options’ to ‘sameorigin’

This past week, I came across something odd. I was building a real-estate website for a client and the client requested a Google Maps embed of specific property. Simple, right? Not entirely.

I was able to locate the address and embed an iframe dynamically by using the following code:

<iframe
width=”100%”
height=”350″
frameborder=”0″ style=”border:0″
src=”http://maps.google.com/?q=<?php echo $address; ?>&output=embed” allowfullscreen>
</iframe>

However, when I’d refresh my browser, I kept getting two console errors:

Refused to display ‘https://www.google.com/maps?q=The+Address’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.

and

Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE

Hmm..

After some digging though, I found out all I had to do was appendĀ &output=embed at the end of the address and it’d magically work.

So, the final embed now looks like this:

<iframe
width=”100%”
height=”350″
frameborder=”0″ style=”border:0″
src=”http://maps.google.com/?q=<?php echo $address; ?>&output=embed” allowfullscreen>
</iframe>