Google встроенная карта не отображается

Question

У меня есть учетные данные API карты Google для ключа браузера. Для разрешенных источников я помещаю на свой сайт, например, *.mysite.com/* и www.mysite.com/*

Затем я использовал Quick Start Build на странице карты по адресу https://developers.google.com/maps/documentation/embed/start, чтобы сделать код. После вставки в мой ключ API он дал мне код iframe для встраивания на веб-страницу.

Но карта не отображается на веб-странице. Это код, который я использую:

<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:EjA3NyBCb290IFJhbmNoIENpciwgRnJlZGVyaWNrc2J1cmcsIFRYIDc4NjI0LCBVU0E&key=AIzaSyDFXuwn2N6KOiOK4neH8ZSBaVLnfVF5TuE" allowfullscreen></iframe> 

Я затрудняюсь узнать, что попробовать дальше.

Answer 1

Для этого может быть несколько причин. Но тот, который меня несколько раз поймал, - это несогласованное использование протокола (http | https). Например, если ваша главная страница использует https, но ваш iframe использует http, он не будет отображаться.

Но тогда, как вы знаете заранее, какой протокол пользователь будет использовать? Вы этого не делаете, и это, на самом деле, не имеет значения. Просто начать IFrame URL без индикатора протокола, например, так:

<iframe src="//www.google.com/maps/embed/v1/place?q=place_id:EjA3NyBCb290IFJhbmNoIENpciwgRnJlZGVyaWNrc2J1cmcsIFRYIDc4NjI0LCBVU0E&key=AIzaSyDFXuwn2N6KOiOK4neH8ZSBaVLnfVF5TuE" allowfullscreen></iframe> 

Обратите внимание на URL начинается с директивой (Content Security Policy) каркасно-Src "//"

Answer 2

CSP может быть запрещающим домен загрузки Google в IFrame. Проверьте наличие ошибок в консоли разработчика.