web-dev-qa-db-fra.com

Obtention des protocoles http / https pour correspondre avec <iframe> pour maps.google.com

J'essaie d'utiliser un <iframe> inclut une carte google, mais la console génère plusieurs erreurs en raison d'un décalage, mais il n'y a aucun décalage apparent, donc je suppose qu'il doit s'agir d'une fonction/d'un processus du côté de google maps.

Plus précisément avec maps.google.com, il semble y avoir une modification du script pour l'iframe, selon this .

Les erreurs dans la console sont les suivantes: (j'obtiens au moins 30 erreurs au chargement de la page)

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.

Étant donné que mon site est http et PAS https, et que l'URL de la carte est http, pourquoi la non-correspondance se produit-elle et comment puis-je résoudre ce problème pour les faire correspondre?

javascripthttpgoogle-mapshttpsprotocols
23
chris Frisina

Il s'agit vraiment d'un bug du code HTML intégrable, créé par la page Google Maps autonome ( maps.google.com -> cliquez sur le bouton de la chaîne de liens pour obtenir le code HTML basé sur l'iframe).
Comme l'a dit aSeptik dans les commentaires à votre question, le rapport de bogue correspondant peut être trouvé ici .

Vous pouvez éviter ce bogue si vous intégrez une carte Google à l'aide de l'API Maps. Cela ne fait aucune différence si vous utilisez l'API Maps directement dans votre page ou dans un cadre iFrame intégré - les deux méthodes fonctionnent correctement.

Voici n exemple d'une autre carte où j'ai utilisé l'API Maps dans un iframe.

Et voici n exemple de votre propre carte en utilisant l'API Maps - intégrée directement dans la page.

Le code supplémentaire nécessaire pour l'API Maps est en fait très petit:

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

J'ai utilisé jQuery ici pour plus de commodité.

16
Jpsy

Ajout de l'attribut crossorigin="anonymous" à la </iframe> résout le problème:

Exemple:

<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