jQuery 更新谷歌地图

Question

我正在尝试使用 jQuery 更新谷歌地图 v3，目前它会加载地图，但是当点击 .preview 时，地图会缩放到宽度和高度，然后变灰。

$('.preview').click(function(){
    var width = $('#width').val();
    var height = $('#height').val();
    $('#map').css({
        'width':width,
        'height':height
    });
    var mapElement = document.getElementById('map');
    var updateOptions = {
        zoom: 6
    }
    var map = new google.maps.Map(mapElement, updateOptions);
});

HTML

<div class="block space" id="map"></div>
<button class="btn preview">Preview</button>

Javascript

google.maps.event.addDomListener(window, 'load', init);
function init() {
    var mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(40.697299 , -73.809815),
    };
    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);
}

Answer 1

这很可能是因为您尝试重新加载地图，而不是重新定位和缩放当前地图。 试试这样，让我知道：

$('.preview').click(function(){
    var width = $('#width').val();
    var height = $('#height').val();
    $('#map').css({
        'width':width,
        'height':height
    });
    map.setZoom(6);
    //map.setCenter() change this is your logic needs it.
});