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

Je suis en train d'utiliser un <iframe> inclure d'une carte google maps, cependant, la console est en train de lancer plusieurs erreurs dues à une incompatibilité, mais il n'y a pas de contradiction apparente, donc je suis en supposant qu'elle doit être une fonction, un processus, sur le côté de google maps.

Spécifiquement avec maps.google.com, il semble y avoir une modification du script pour l'iframe, selon cette.

Les erreurs dans la console est ceci: ( je suis arriver 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.

Depuis mon site est http et NON https, et l'url de la carte est http, pourquoi la disparité du produit, et comment puis-je résoudre ce problème pour les faire correspondre?

  • il n'est pas de votre faute, c'est un google bug code.google.com/p/chromium/issues/detail?id=43173
  • Pouvez-vous nous montrer l'exacte code d'intégration (balise HTML)?
  • <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="maps.google.com/maps/... /><small>Afficher <a href="maps.google.com/maps/..." style="color:#0000FF;text-align:left">Charlotte</a> dans une carte plus grande</small>
  • Je ne peux pas reproduire votre problème. La suite de jsFiddle montre le code que j'ai testé avec: jsfiddle.net/YNwGL Il se charge sans aucun avertissement dans Chrome, FF et IE9. Je suppose que Google a résolu le problème.
  • la Version chrome 24.0.1312.52 (dernière version) a toujours le problème... FF ne montrent pas de questions, et je n'ai pas IE sur mac(d-oh) @Jpsy
  • Est-il possible que ce soit Mac sont-ils liés? Je n'ai pas ce problème avec google Chrome 24 sur Windows 7 64.
  • si vous n'avez pas l'esprit, jetez un oeil ici evernote.com/shard/s55/sh/0ddc8d59-1337-4b50-95de-d5e56efc5e38/...
  • Désolé Nathan, vous êtes COMPLÈTEMENT à droite! J'obtiens les mêmes erreurs JS, quand j'ouvre la console Chromée. Je n'ai pas regarder là avant parce que j'ai un plugin Chrome qui me parle de JS erreurs de droit dans la barre d'adresse, mais il n'a pas d'incendie. Il n'est évidemment pas la capture des erreurs qui se produisent dans un iFrame document.
  • Curieux, ce que l'extension utilisez-vous que les feux de la console d'erreurs dans la barre d'adresse?
  • il est appelé Erreurs JavaScript Déclarant. Voir ici: chrome.google.com/webstore/detail/javascript-errors-notifie/...

InformationsquelleAutor chris Frisina | 2012-11-25
  1. 16

    C'est vraiment un bug de la intégrable code HTML, créé par l'autonome de Google Maps page (maps.google.com -> cliquez sur le lien de la chaîne de bouton pour obtenir l'iframe HTML).

    Comme dit par aSeptik dans les commentaires à votre question, le rapport de bug peuvent être trouvés ici.

    Vous pouvez éviter ce bug si vous incorporez une Carte Google map à l'aide de l'API des Cartes. Il ne fait aucune différence si vous utilisez l'API des Cartes directement dans votre page ou au sein d'un intégré à l'iframe - deux façons de fonctionner correctement.

    Ici est un exemple d'une autre carte où j'ai utilisé les Cartes de l'API dans un iframe.

    Et voici un exemple de votre propre carte à l'aide de l'API des Cartes intégré directement dans la page.

    Le code supplémentaire nécessaire pour les Maps API est en fait très faible:

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

    InformationsquelleAutor Jpsy
  2. 1

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

    Exemple:

    HTML:

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

    InformationsquelleAutor imcg
  3. -1

    Ne peux pas dire à propos du bug qui aSeptik mentionné, mais si vous voulez éviter de le http/https question tout simplement ne pas l'écrire dans l'URL.

    Par exemple: au Lieu d'écrire " http://maps.google.com " qui va entraîner l'avertissement que vous avez reçu, écriture de '//maps.google.com' va prendre automatiquement les sessions en cours scheme (http/https) et de faire l'appel d'API.

    Espère que cette aide.

    • Cela ne résout pas le problème. Ni permet-il de résoudre le problème d'ajouter le Gmaps appel avec http://.
    • essayé et cela a fonctionné - j'ai pas d'erreur. J'ai également obtenu aucune carte...
    InformationsquelleAutor Saad Ulde