jquery - 如何使用按钮更改谷歌地图的大小

Question

经过几个小时的网络搜索后，我发现了这个网站: http://leonardogandini.com/projects/Google-Maps-API/map-resize这正是我想要的。通过按按钮调整谷歌地图的大小。

我对 Jquery 或 Javascript 没有太多经验，但我正在努力完成这项工作。所以我复制了代码并尝试显示它。

当我输入此代码时， map 消失了。我错过了什么吗？有人可以让这个工作吗？谢谢。

$(document).ready(function() {
$('#resizeuno').click(function() {
    $('#map_canvas').css({'width':'300','height':'400'});
    google.maps.event.trigger(map, 'resize');  
});
$('#reset').click(function() {
    $('#map_canvas').css({'width':'855','height':'550'});
    google.maps.event.trigger(map, 'resize');   
}); 
});

看看代码 http://jsfiddle.net/yungchristie/9P9RG/1/

Answer 1

您忘记了宽度/高度后面的px。

<强> Working fiddle

$(document).ready(function() {
    var $mapCanvas = $('#map-canvas');

    $('#resizeuno').click(function() {
        $mapCanvas.css({'width':'300px','height':'400px'});
        google.maps.event.trigger(map, 'resize');  
    });

    $('#reset').click(function() {
        $mapCanvas.css({'width':'855px','height':'550px'});
        google.maps.event.trigger(map, 'resize');   
    }); 
});

如果你只添加一个类，而不是通过 jQuery 设置 CSS，效果会更好:

$(document).ready(function() {
    var $mapCanvas = $('#map-canvas');

    $('#resizeuno').click(function() {
        $mapCanvas.addClass('map_resize');
        google.maps.event.trigger(map, 'resize');  
    });

    $('#reset').click(function() {
        $mapCanvas.removeClass('map_resize');
        google.maps.event.trigger(map, 'resize');   
    }); 
});

在你的 CSS 中:

#map-canvas {
    width: 855px;
    height: 550px;
}

#map-canvas.map_resize {
    width: 300px;
    height: 400px;
}