谷歌地图 - Onclick重新渲染（高度错误）

Question

我有自定义样式的JS工作谷歌地图。我希望在网站上使用这两次，但是使用固定元素，元素设置为@ 0px然后转换为800px高度。但是我需要调用google resize事件，以便地图重新调整大小，从而导致错误的UI（剪切的地图）。

调整代码大小：

google.maps.event.trigger(map, 'resize');

我有以下代码：

function google_map_custom(){
    function GoogleMapOptions(){
        var markerPosition = new google.maps.LatLng([variable],[variable]),
            mapCenter = new google.maps.LatLng([variable],[variable]);

        var mapOptions = {
            zoom: 15,
            scrollwheel: false,
            panControl:true,
            zoomControl:true,
            rotateControl:true,
            disableDefaultUI:true,
            center: mapCenter,
            styles: [
                {
                    "CUSTOM Google JSON": "styles"
                },
            {}]

        };

        // ASSOCIATE VARIABLE WITH HTML ID
        var mapElement = document.getElementById('google-map');
        // Align Settings to DOM Element
        var map = new google.maps.Map(mapElement, mapOptions);

        // RETINA MARKER (CUSTOM RE-SIZE) - USE VARIABLE BELOW
        var image = new google.maps.MarkerImage("[path-to-url]", null, null, null, new google.maps.Size(44,65));

        // Tailor Custom Marker (SVG / PNG ACCEPTED) - USE CDN
        var marker = new google.maps.Marker({
            position: markerPosition,
            map: map,
            icon:image
        });
    }
    // Trigger map with element id and specific settings above
    google.maps.event.addDomListener(window, 'load', GoogleMapOptions);
}

我的问题是，如何在点击处理程序上调用resize事件？我以此代码为例：

    $('[class selector]').click(function(){
        $('#google-map.hidden--homepage').toggleClass('[active selector 800px in height]');

       // INVOKE FUNCTION
        google_map_custom();
    });

只是确认，过渡工作，样式工作，地图加载。我只需要在元素放大时触发地图。

谢谢！

评论IMG（这是谷歌容器的样式：