Карта Google с масштабом 21 будет отображаться как серая область, если я не нажму на нее

У меня есть веб-сайт .net, который содержит 2 карты Google на 2 отдельных страницах, как показано ниже: -

Страница 1

<div class = "map">                    
<iframe src = "https://www.google.com/maps/embed/v1/place?key=***&q=3****2&zoom=21&maptype=satellite"></iframe></div>

Страница 2

<div class = "map">
<iframe src = "https://www.google.com/maps/embed/v1/place?key=***&q=3****0&zoom=18&maptype=satellite"></iframe>   

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

и мне нужно нажать на область, чтобы отобразить карту. в то время как на второй странице карта будет отображаться правильно после загрузки страницы.

теперь единственные различия между двумя картами: -

1. каждая карта имеет свое согласование.
2. первая карта имеет zoom=21, а вторая карта - zoom=18.

Я недавно заметил эту проблему, и я уверен, что она хорошо работала последние 2 года. так что может кто-нибудь посоветовать возможные источники этой проблемы? Я тестирую это на FireFox, IE11 и Google Chrome ... и все они имеют одну и ту же проблему.

Спасибо