Ich habe viel recherchiert und es scheint, dass viele Leute das gleiche Problem hatten wie ich, aber ich kann nicht herausfinden, wie ich es beheben kann.

Grundsätzlich initialisiere ich eine Google Map in einem versteckten Bootstrap-Tab. Wenn ich auf die Pille klicke, um die Registerkarte sichtbar zu machen, wird nur ein kleiner Ausschnitt der Karte angezeigt.

Soweit ich weiß, wird die Karte in einem versteckten Element initialisiert. Daher muss ich die Karte erst initialisieren, nachdem die Registerkarte sichtbar wird.

Ich habe es versucht und ich habe es versucht und ich kann den Code nicht richtig verstehen. Jede Hilfe wäre großartig - wie kann ich bewirken, dass die Map erst ausgeführt wird, wenn der Tab sichtbar ist?

Danke im Voraus

<!-- this is the hidden tab-->
<div class="tab-pane map-pane" id="map<?php echo $country_slug; ?>">

<div class = "row">
    <div class = "col-md-12">
      <div id="map-canvas" class = "map-canvas"></div>
    </div>
    </div>

    <!--and here is the map which executes inside the hidden tab-->
    <!--how can i cause this script to delay execution until the tab is shown?-->
<script type="text/javascript">

function initialize() {
    var mapOptions = {
       center: new google.maps.LatLng(22.39813,114.10943),
       zoom: 8
    };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

        }
    google.maps.event.addDomListener(window, 'load', initialize);