Если контейнер карты скрыт то по клику на кнопку он плавно раскрываетс

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Если контейнер карты скрыт, то по клику на кнопку он плавно раскрывается, только после этого инициализируется карта и заменяется текст на кнопке. Если-бы карта инициализировалась сразу после загрузки страницы, то тогда при раскрытии скрытого блока отображался бы только один тайл карты в левом верхнем углу. Карта инициализируется с задержкой, чтобы не было проблемы с центрированием.
function displayMap() {
if ( $('#map-box').css('display') == 'none' ) {
$('#map-box').animate({height: 'show'}, 400);
setTimeout("initialize()" ,400);
$(".m-sp-1").replaceWith("<span class='m-sp-2'>Скрыть карту</span>");
}
else {
$('#map-box').animate({height: 'hide'}, 200);
$(".m-sp-2").replaceWith("<span class='m-sp-1'>Показать карту</span>");
}
};
function initialize() {
// Создаём карту
var latitude = $('#map-box').attr('data-map-latitude');
var longitude = $('#map-box').attr('data-map-longitude');
var mapzoom = parseInt($('#map-box').attr('data-map-zoom')); //Применяю parseInt чтобы переменная стала числовой, без него переменная становится строковой, что ведёт в дальнейшем к ошибке.
var map;
var mapCoordinates = new google.maps.LatLng(latitude, longitude);
var myOptions = {
zoom: mapzoom,
center: mapCoordinates,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
//Проверяем атрибут-наличие маркера, если значение "true", то тогда ставим маркер в центре карты с подписью, взятой из соответствующего атрибута контейнера карты.
var point = $('#map-box').attr('map-marker');
var mapname = $('#map-box').attr('data-map-name');
if (point == 'true')
{
var marker = new google.maps.Marker({
position: mapCoordinates,
map: map,
title: mapname
});
};
};