web-dev-qa-db-ja.com

maps.google.comのhttp / httpsプロトコルを<iframe>と一致させる

Googleマップの<iframe>インクルードを使用しようとしていますが、不一致が原因でコンソールがいくつかのエラーをスローしていますが、明らかな不一致はないので、それがGoogleマップの側面。

特にmaps.google.comでは、iframeのスクリプトが this に従って変更されているようです。

コンソールのエラーは次のとおりです：（ページの読み込み時に少なくとも30個のエラーが発生します）

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.

私のサイトはhttpsであり、httpsではなく、マップのURLはhttpなので、不一致が発生するのはなぜですか。一致させるためにこれを修正するにはどうすればよいですか。

javascripthttpgoogle-mapshttpsprotocols
23
chris Frisina

これは、スタンドアロンのGoogleマップページ（ maps.google.com ->リンクチェーンボタンをクリックしてiframeベースのHTMLコードを取得する）によって作成された、埋め込み可能なHTMLコードのバグです。
質問へのコメントでaSeptikが述べたように、対応するバグレポート ここで見つけることができます 。

Maps APIを使用してGoogleマップを埋め込むと、このバグを回避できます。 Maps APIをページで直接使用する場合でも、埋め込みiframe内で使用する場合でも、どちらの方法でも問題はありません。

これは、iframe内でMaps APIを使用した他のマップの 例 です。

そして、ここに 例 のMaps APIを使用した独自のマップ-ページ内に埋め込まれています。

Maps APIに必要な追加のコードは実際には非常に小さいものです。

<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>

ここでは便宜上、jQueryを使用しました。

16
Jpsy

属性crossorigin="anonymous"を</iframe>に追加すると、問題が解決します。

例：

<iframe
        crossorigin="anonymous"
        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10005.660822865373!2d6.3855055!3d51.1745698!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xbc2d05dc3af26862!2sBORUSSIA-PARK!5e0!3m2!1sen!2suk!4v1448289882279"
        width="400"
        height="300"
        frameborder="0"
        allowfullscreen>
</iframe>
1
imcg