如何改变一个按钮的谷歌地图的大小

Question

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

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

当我输入这段代码时，地图消失了。我错过了什么吗？任何人都可以做这项工作吗？谢谢。

$(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; 
}