Хитрость заключается не в изменении размера карты, а в том, чтобы поместить маску на карту, которую вы создали (карта создается в максимальном размере), и просто переместить маску (элемент div).Карта всегда остается одинакового размера.Возможно, вам придется настроить положение других элементов управления на карте, таких как масштабирование и т. Д. (Что можно сделать с помощью стандартной карты API), или просто отобразить элементы управления с правой стороны.
Одна вещь, которую нужно сохранитьпомните, что эта карта будет иметь ограничивающую рамку, равную полноразмерной карте, поэтому, если вы добавляете маркеры на карту (и вы хотите, чтобы пользователь их видел), вам необходимо отслеживать ограничивающую рамку видимой в данный момент части карты (latLngпреобразование в пиксели) - так что вы можете прокручивать карту, если добавляете маркер на участок, покрытый маской.
Вот пример, выполненный с использованием анимации jquery (но вы можете добиться этого, просто отключив видимость боковой панели).,Еще одна важная вещь, которую стоит отметить - это CSS, используемый для обертки, боковой панели и контейнера карты .... Наслаждайтесь:
<!DOCTYPE html>
<html>
<head>
<title>Resize map</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var overlay;
var sidebar_expanded = true;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
$(document).ready( function() {
$("#hide").click( function(e) {
if (sidebar_expanded){
offset = "-=140";
text = "Show me"
} else {
offset = "+=140";
text = "Hide me"
}
$("#sidebar").animate({
left: offset,
}, 1000, function() {
// Animation complete.
//you probably want to change content of the hide me div to show me, etc)
$("#hide").text(text);
sidebar_expanded = (sidebar_expanded ) ? false : true;
});
})
})
</script>
<style>
body {
text-align: center;
}
#map_canvas {
position: absolute;
top: 0;
left: 0;
}
#wrapper {
position: relative;
width: 900px;
height: 500px;
overflow: hidden;
}
#sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 500px;
background: white;
z-index: 2000000;
border: 1px solid black;
}
</style>
</head>
<body onload="initialize()">
<div id="wrapper">
<div id="sidebar">
<div id="hide" style="text-align:right;padding: 6px;">
Hide me
</div>
</div>
<div id="map_canvas" style="width:900px;height: 500px;">
</div>
</div>
</body>
</html>