Why does a modal window with an iframe (google maps) located on an HTML page open only on the second click on the link, and not on the first?

Question

Google Maps

Good day to all! The question is already in the title. I ask for your help...

<!-- Карта-geolocation  (a href="javascript:void(0)" Чтобы не перекидывало вверх страницы!) -->
<li class="geolocation"><a href="javascript:void(0)" id="modal_trigger">
                           <i class="fas fa-map-marker-alt"></i>United States</a>
</li>

<!-- Всплывающее (модальное) окно Карты -->
<!-- Карта-geolocation -->
<div id="modal_1"><iframe src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=United%20States%20California+(United%20States)&amp;ie=UTF8&amp;t=&amp;z=5&amp;iwloc=B&amp;output=embed"></iframe>
    <div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;"></div>
    <span class="modal-close" id="close">X</span>
</div><br/>