2012-11-25 6 views
22

Próbuję użyć części mapy google , jednak konsola rzuca kilka błędów z powodu niezgodności, ale nie ma widocznej niezgodności, więc zakładam, że musi to być funkcja/proces po stronie map google.Uzyskiwanie protokołów http/https w celu dopasowania do <iframe> dla maps.google.com

W szczególności w przypadku maps.google.com, wydaje się, że jest zmiana skryptu dla elementu iframe, zgodnie z this.

błędy w konsoli to: (ja dostaję co najmniej 30 błędów na stronie obciążenia)

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. 

Ponieważ moja strona jest http i nie https, a mapa jest http, dlaczego jest niedopasowanie występujące i jak mogę to naprawić, aby je dopasować?

+4

to nie twoja wina, że ​​to bug http://code.google google. com/p/chromium/issues/detail? id = 43173 –

+0

Czy możesz pokazać nam dokładny kod osadzania (znaczniki HTML)? – Bergi

+0


Zobacz Charlotte na większej mapie

Odpowiedz

-1

Nie mogę powiedzieć o błędzie, o którym wspominał aSeptik, ale jeśli chcesz uniknąć problemu http/https, po prostu nie pisz go w adresie URL.

Np .: Zamiast pisać "http://maps.google.com", co spowoduje otrzymanie ostrzeżenia, napisz "//maps.google.com", to automatycznie podejmie bieżący schemat sesji (http/https) i wykona wywołanie API .

Mam nadzieję, że to pomoże.

+0

To nie rozwiązuje problemu. Nie rozwiązuje to również problemu, aby poprzedzić wywołanie GMaps za pomocą '' http: // ''. – Jpsy

+4

próbowałem tego i zadziałało - nie mam błędu. Nie mam również mapy ... – Luke

16

To naprawdę jest błąd w osadzającym się kodzie HTML, stworzonym przez autonomiczną stronę Google Maps (maps.google.com -> kliknij przycisk łańcucha linków, aby uzyskać kod HTML oparty na iframe).
Jak powiedział aSeptik w komentarzach do twojego pytania, odpowiadający raport o błędzie can be found here.

Możesz tego uniknąć, jeśli umieścisz Mapę Google przy użyciu interfejsu API Map Google. Nie ma to znaczenia, jeśli korzystasz z interfejsu API Map bezpośrednio na swojej stronie lub w osadzonym elemencie iframe - oba sposoby działają dobrze.

Oto an example z innej mapy, na której korzystałem z interfejsu API Map w ramach elementu iframe.

A tutaj jest an example z własnej mapy za pomocą interfejsu API Map Google - osadzonego bezpośrednio na stronie.

Dodatkowy kod potrzebny do Maps API jest rzeczywiście bardzo mały:

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

użyłem jQuery tutaj dla wygody.

1

Dodając atrybut crossorigin="anonymous" do </iframe> rozwiązuje problem:

Przykład:

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