He investigado mucho y parece que muchas personas han tenido el mismo problema que yo aquí, pero no puedo averiguar cómo solucionarlo.

Básicamente estoy inicializando un mapa de Google dentro de una pestaña escondida. Cuando hago clic en la píldora para hacer que la pestaña sea visible, solo se muestra una pequeña sección del mapa.

De lo que deduzco esto es porque el mapa se está inicializando en un elemento oculto. Así que necesito iniciar el mapa solo después de que la pestaña se haga visible.

He intentado y he intentado y no puedo obtener el código correcto. Cualquier ayuda sería grandiosa. ¿Cómo puedo hacer que el mapa solo se ejecute después de que la pestaña esté visible?

Gracias por adelantado

<!-- 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);