Получение протоколов http/https в соответствии с <iframe> для maps.google.com

Я пытаюсь использовать привязку <iframe> к карте google, однако консоль бросает несколько ошибок из-за несоответствия, но нет явного несоответствия, поэтому я предполагаю, что это должна быть функция/процесс на сторона карт google.

В частности, с maps.google.com, по-видимому, есть изменение в script для iframe, в соответствии с этим.

Ошибки в консоли: (я получаю по меньшей мере 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.

Так как мой сайт - http и NOT https, а URL-адрес карты - http, почему возникает несоответствие, и как я могу исправить это, чтобы они совпадали?

Ответ 1

Это действительно ошибка встроенного HTML-кода, созданного на отдельной странице Карт Google (maps.google.com → нажмите на цепочку ссылок, чтобы получить HTML-код на основе iframe).
Как сказал aSeptik в комментариях к вашему вопросу, соответствующий отчет об ошибке можно найти здесь.

Вы можете избежать этой ошибки, если вы вставляете карту Google с помощью API Карт. Это не имеет никакого значения, если вы используете API Карт непосредственно на своей странице или внутри встроенного iframe - оба способа работают нормально.

Вот пример какой-либо другой карты, где я использовал API Карт в iframe.

И вот пример вашей собственной карты, используя API Карт, встроенный прямо на странице.

Дополнительный код, необходимый для 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 здесь для удобства.

Ответ 2

Добавление атрибута 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>

Ответ 3

Не могу сказать о ошибке, о которой упомянул aSeptik, но если вы хотите избежать проблемы с http/https, просто не записывайте ее в URL-адрес.

Например: Вместо того, чтобы писать http://maps.google.com ', что приведет к полученному предупреждению, напишите'//maps.google.com ', это автоматически примет текущую схему сеансов (http/https) и вызовет API.

Надеюсь, что это поможет.