How to display google map in Iframe

I want to display google maps in Razor MVC page but its not displaying and getting an error as follows:

Refused to display 'https://maps.google.com/maps/ms?ie=UTF8&hl=en&msa=0&msid=XXXXXXXXXXXXXXX&ll=XXXXXXXXXX&spn=XXXXXXXXXX&output=embed' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

The code is as follows:

<div id="map" style="width: 251px; height: 202px;">
  <iframe id="iGmap" width="251" height="202" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="
http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=XXXXXXXXXXXXXXXXXXXXX&amp;ll=XXXXXXXXXXXXXXXX&amp;spn=XXXXXXXXXXXXX&amp;output=embed">
  </iframe>
</div>

Answers


Google Maps blocks external sites from embedding it in an iframe. This is a policy on their end, so it's not something you can circumvent. If you want to display the map in an iframe, you'll need to do so via the Google Maps Embed API (or one of their other APIs) instead.


This I have achieved by removing 'ms?' from my URL

http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=XXXXXXXXXXXXXXXXXXXXX&amp;ll=XXXXXXXXXXXXXXXX&amp;spn=XXXXXXXXXXXXX&amp;output=embed

to

http://maps.google.com/maps?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=XXXXXXXXXXXXXXXXXXXXX&amp;ll=XXXXXXXXXXXXXXXX&amp;spn=XXXXXXXXXXXXX&amp;output=embed

Do it like this

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1-VlXsvMWMr8EotfMcIwYKt-1SrI" width="320" height="350" style="margin-top:-387px"></iframe>

Let me know if it works


Need Your Help

ruby idiom: predicates and the conditional operator

ruby predicate ternary-operator conditional-operator

I like judicious use of the ternary, conditional operator. To my mind it's quite succinct.