Javascript jQuery切换会干扰Google Maps API v3

我已经问了同样的问题，但不知道当时的问题是什么

我现在发现jQuery的

toggle

函数干扰了GoogleMapsAPI，这就是地图无法正确显示的原因

地图最好在站点加载时加载，但仅在调用

toggle

功能时显示。如果每次调用

toggle

函数时都再次加载映射，也可以

这是显示简单路线的地图代码：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="width: 600px;">
    <div id="map" style="width: 280px; height: 400px;"></div>
</div>

<script type="text/javascript">
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();

    var map = new google.maps.Map(document.getElementById('map'), {
        zoomControl: false,
        disableDoubleClickZoom: false,
        mapTypeControl: false,
        scaleControl: false,
        scrollwheel: false,
        panControl: false,
        streetViewControl: false,
        draggable: false,
        overviewMapControl: false,
        overviewMapControlOptions: {
            opened: false
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var punkt = new google.maps.MarkerImage('http://team3.digital-cultures.net/pic/whitedot.svg',
        new google.maps.Size(25, 25),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 10));

    var marker1 = new google.maps.Marker({
        position: new google.maps.LatLng(53.249343, 10.419109),
        map: map,
        icon: punkt,
    });
    var marker2 = new google.maps.Marker({
        position: new google.maps.LatLng(53.230084, 10.401052),
        map: map,
        icon: punkt,
    });
    var infowindow1 = new google.maps.InfoWindow({
        content: "START"
    });
    var infowindow2 = new google.maps.InfoWindow({
        content: "ZIEL"
    });

    infowindow1.open(map, marker1);
    infowindow2.open(map, marker2);

    directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
        polylineOptions: {
            strokeColor: "white",
            strokeWeight: 5
        }
    });

    directionsDisplay.setMap(map);

    var requestroute = {
        origin: '53.249343, 10.419109',
        destination: '53.230084, 10.401052',
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(requestroute, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });

    map.set('styles', [{
        stylers: [{
            "color": "#5dc8b1"
        }]
    }, {
        featureType: "poi",
        elementType: "labels",
        stylers: [{
            visibility: "off"
        }]
    }]);
</script>

因此，当单击链接“showhideroute”时，将打开类“route”，其中显示地图

我发现这些问题解决了相同的问题，但无法将解决方案转移到我的代码中：

你能帮我吗

非常感谢

---

编辑：是它应该看起来的样子，是它实际看起来的样子

好的，明白了！解决方案是仅在调用toggle时加载地图。

 $(document).ready(function () {    
        $('.route').hide();
        $('a#showhideroute').click(function () {
            $('a#logout').toggle(0);
            $('.route').slideToggle(400);
            $('a#showhideroute').toggleClass('active');
            google.maps.event.trigger(map, "resize");
        });

        $('.frage').hide();
        $('a#showhidefrage').click(function () {
            $('.frage').toggle(400);
        });

        $('.users').hide();
        $('#user1').hide();
        $('#user2').hide();
        $('#user3').hide();
        $('a#showhideuser').click(function () {
            $('.users').finish(true, false).fadeToggle(200);
            $('#user1').finish(true, false).slideToggle(400);
            $('#user2').finish(true, false).slideToggle(400);
            $('#user3').finish(true, false).slideToggle(400);

        }).finish(true, false);

});