谷歌地图，使用waypoints.js重新调整大小并重新定位地图

Question

在有人说这个问题被提出并回答之前，我想说是和否。我已经对stackoverflow进行了大量的搜索，并尝试使用我发现的但仍未正确的方法。

我构建了一个单页滚动网站，并使用waypoints.js在滚动点上触发css3动画。我有一个带有谷歌地图脚本的页面，我发现前一段时间让用户输入他们的位置，地图将显示预设标记的方向。

问题A

谷歌地图方向的父div设置为display：none;和显示：块;一旦到达了航点，这就造成了地图破坏的问题，只加载了顶角，现在这很容易研究，我想出了如何在我的代码中使用它来解决这个问题。

问题B

然后我遇到了地图不再以我的标记为中心的问题，我已经完成了研究并在那里找到了一些代码但是没有一个在我的情况下工作。我的路标点触发完成后，我需要触发调整大小功能和居中功能。

编辑：直播网站在这里：dreamsynk.com/rosewater点击＆＃34; The Studio＆＃34;

代码

我发现的GOOGLE MAPS脚本：

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
    var latlng = new google.maps.LatLng(-33.8333406,18.6470022);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map"),myOptions);

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"Get Directions"
    }); 
}
function calcRoute() {
    var start = document.getElementById("routeStart").value;
    var end = "-33.8333406,18.6470022";
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            if (status == 'ZERO_RESULTS') {
                alert('No route could be found between the origin and destination.');
            } else if (status == 'UNKNOWN_ERROR') {
                alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
            } else if (status == 'REQUEST_DENIED') {
                alert('This webpage is not allowed to use the directions service.');
            } else if (status == 'OVER_QUERY_LIMIT') {
                alert('The webpage has gone over the requests limit in too short a period of time.');
            } else if (status == 'NOT_FOUND') {
                alert('At least one of the origin, destination, or waypoints could not be geocoded.');
            } else if (status == 'INVALID_REQUEST') {
                alert('The DirectionsRequest provided was invalid.');                   
            } else {
                alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
            }
        }
    });
}

MY WAYPOINTS.JS功能正在打破地图（位置div是我的谷歌地图方向脚本的父包装）：

jQuery('.studio-page').waypoint(function() {
jQuery('.kickass-studio').addClass( 'show animated bounceInLeft' );
jQuery('.location').addClass( 'show animated bounceInRight' );
jQuery('.geo-address').addClass( 'show animated bounceInDown' );

google.maps.event.trigger(map, "resize"); 
map.setCenter(center);

},
{
offset: '10%'
});

现在这部分正在运作：

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

但这部分不是：

map.setCenter(center);

我在jQuery文档就绪函数之前尝试过使用它：

var center = new google.maps.LatLng(-33.8333406,18.6470022);

这是我的HTML：

<div class="location">
                <!-- google maps -->
                <div class="map">
                    <span class="area-local">
                        <span class="icon-location local-inner"></span>
                        <span class="geo-address geo-one">01 Sher Street, Durbanville, 7550</span>
                        <span class="geo-address geo-two">62 Roeland Street, Cape Town</span>
                    </span>
                    <!-- Route Planner -->
                    <div class="route">
                        <span>Enter your location</span>
                        <form action="/routebeschrijving" onsubmit="calcRoute();return false;" id="routeForm">
                            <input type="text" class="plan-box" id="routeStart" name="location" value="" placeholder="Location here">
                            <input type="submit" class="plan-btn" value="Get Directions" name="find">
                        </form>
                        <a href="#directions" class="lightbox instructions">View full directions</a>
                    </div>
                    <!-- Directions Lightbox -->
                    <div class="panel" id="directions">
                        <div id="directionsPanel" class="panel-inner"></div>
                    </div>
                    <div class="map-inner map-one" id="map"></div>
                    <div class="map-inner map-two"></div>

                </div>
            </div><!-- END map wrapper -->

在你将这个问题投下来之前请记住 - 我的javascript非常糟糕，说实话我不知道上面发生了什么，我只是玩游戏直到事情发生。我已经和它斗争了好几个小时。我只是不对。