Add a google map to wordpress is easy. Using google map’s sharing feature to get the following html code and insert it to your posts or pages. You will need to insert in “Text” mode rather then “Visual” Mode.
<iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12778.244902793573!2d174.74420805325917!3d-36.80506925478195!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xc2ab02b4bdebae5b!2sTai+Ping+Trading+Supermarket!5e0!3m2!1sen!2snz!4v1516227379460″ width=”600″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>
An interesting thing is that the iframe tag in WordPress is not fully functional, it only works for google maps and some other particular urls. I duplicated above code and changed the URL to point to Google’s home page, then it displays a blank iframe as below.
<iframe style=”border: 0;” src=”https://www.google.com” width=”600″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen”><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span></iframe>
The reason is that google allows iframe for their maps urls, but doesn’t allow for their main home page.
If you open browser console, you may see something like:
Refused to display ‘https://www.google.co.nz/?gfe_rd=cr&dcr=0&ei=dvZfWtjUG6HU8AfVoZGYBw’ in a frame because it set ‘X-Frame-Options’ to ‘sameorigin’.
If you look at the HTTP Response Header, you will find something like this:
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Strict-Transport-Security: max-age=3600
P3P: CP=”This is not a P3P policy! See g.co/p3phelp for more info.”
Date: Thu, 18 Jan 2018 01:51:55 GMT
Server: gws
Content-Length: 114617
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Expires: Thu, 18 Jan 2018 01:51:55 GMT
Cache-Control: private
If you move this header from the HTTP Response Header, then, it will work.
I set my Fiddler as a proxy and add the following line to OnBeforeResponse method in the script.
oSession.oResponse.headers.Remove(“X-Frame-Options”);
Then the iframe appears, which prove that WordPress support iframe well. You will still only able to see the websites that allow iframe.
