让http / https协议与< iframe>匹配对于maps.google.com [英] Getting http/https protocols to match with <iframe> for maps.google.com
问题描述
我试图使用一个包含谷歌地图的< iframe> ，但由于不匹配，控制台抛出了一些错误，但没有明显的不匹配，所以我假设它必须是谷歌地图一侧的功能/过程。
具体来说，对于maps.google.com，似乎有一个变化根据这 的iframe脚本。
控制台中的错误是这样的:(我在页面加载时至少出现30次错误）
不安全的JavaScript尝试使用URL访问框架http://www.developer.host.com/从
框架使用URL https://maps.google.com/maps/msmsa=0&msid=
212043342089249462794.00048cfeb10fb9d85b995& ie = UTF8& t =
m& ll = 35.234403，-80.822296& spn = 0.392595,0.137329& z = 10& output = embed。
请求访问的帧的协议为'https'，访问
的帧的协议为'http'。协议必须匹配。
因为我的网站是http而不是https，地图网址是http，为什么发生了不匹配，我该如何解决这个问题以使它们匹配？
这真的是一个可嵌入HTML代码的bug，由独立的Google地图页面（ maps.google.com - >点击链接链接按钮以获取基于iframe的HTML代码）。
正如aSeptik在您的问题的评论中所述，相应的错误报告可以在这里找到。
如果您使用Maps API嵌入Google地图，则可以避免该错误。如果您直接在您的页面或嵌入式iframe中使用Google地图API，那么这两种方式都没有什么区别 - 这两种方式都可以正常工作。
这里是一个其他地图的示例，我已经在iframe中使用了Maps API。
这里是使用Maps API的您自己的地图的示例 - 嵌入在页面中。
Maps API所需的附加代码实际上非常小：
< HTML>
< head>
< script type ='text / javascript'src =https://maps.googleapis.com/maps/api/js?sensor=false>< / script>
< script type ='text / javascript'>
$（function（）{
var myOptions = {
center：new google.maps.LatLng（35.201867，-80.836029），
zoom：10，
mapTypeId ：google.maps.MapTypeId.ROADMAP $ b $;
gMap = new google.maps.Map（document.getElementById（'map_canvas'），myOptions）;
var kmlLayer =新的google.maps.KmlLayer（'https://maps.google.com/maps/ms?ie=UTF8&t=m&authuser=0&msa=0&output=kml&msid=212043342089249462794.00048cfeb10fb9d85b995'）;
kmlLayer.setMap（gMap）;
}）;
< / script>
< / head>
< body>
< div id =map_canvasstyle =width：400px; height：400px;>< / div>
< / body>
我在这里使用了jQuery方便。
I am trying to use an <iframe> include of a google map, however the console is throwing several errors due to a mismatch, but there is no apparent mismatch, so I'm assuming it must be a function/process on the side of google maps.
Specifically with maps.google.com, there appears to be a change to the script for the iframe, according to this.
The errors in the console is this: ( I am getting at least 30 errors on page load )
Unsafe JavaScript attempt to access frame with URL http://www.developer.host.com/ from
frame with URL https://maps.google.com/maps/msmsa=0&msid=
212043342089249462794.00048cfeb10fb9d85b995&ie=UTF8&t=
m&ll=35.234403,-80.822296&spn=0.392595,0.137329&z=10&output=embed.
The frame requesting access has a protocol of 'https', the frame being
accessed has a protocol of 'http'. Protocols must match.
Since my site is http and NOT https, and the map url is http, why is the mismatch occuring, and how do I fix this to make them match?
This really is a bug of the embeddable HTML code, created by the standalone Google Maps page (maps.google.com -> click on link chain button to get the iframe based HTML code).
As said by aSeptik in the comments to your question, the corresponding bug report can be found here.
You can avoid that bug if you embed a Google Map using the Maps API. It does make no difference if you use the Maps API directly in your page or within an embedded iframe - both ways work fine.
Here is an example of some other map where I have used the Maps API within an iframe.
And here is an example of your own map using the Maps API - embedded right within the page.
The additional code needed for the Maps API is actually very small:
<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
$(function(){
var myOptions = {
center: new google.maps.LatLng(35.201867,-80.836029),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
gMap = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var kmlLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?ie=UTF8&t=m&authuser=0&msa=0&output=kml&msid=212043342089249462794.00048cfeb10fb9d85b995');
kmlLayer.setMap(gMap);
});
</script>
</head>
<body>
<div id="map_canvas" style="width: 400px; height: 400px;"></div>
</body>
I have used jQuery here for convenience.
这篇关于让http / https协议与< iframe>匹配对于maps.google.com的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
