• 欢迎订阅我的Youtube频道
  • 欢迎加入我的电报群

Add a google map to wordpress

网站建设 fennng 1年前 (2018-01-17) 544次浏览 0个评论

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&#8243; 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&#8221; 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&#8217; 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.

 

 


峰享技术 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Add a google map to wordpress
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址