Перестроение Google Maps

@Dmitrin · Регистрация: 04.12.2012

Студворк — интернет-сервис помощи студентам

Добрый день. Подключаю карту Google, устанавливаю свой маркер. Изначально она прижата к правому краю. При клике на карту (там дополнительный блок ссылка, который исчезает при клике) карта перемещается влево и там меняется ширина карты. Но, при этом, получается так, как показано на рисунке 2. Карта как бы не прогружается. И центр смещен. Подскажите, как это можно исправить? Я думал, что можно как-то перестроить карту с новыми размерами контейнера, но пока не могу разобраться, как. Новая ширина правильно задается (800px).

@Dmitrin · 16.08.2016, 22:16 **[ТС]**

Никто не сталкивался с такой проблемой?

@Padimanskas · 17.08.2016, 01:21

Dmitrin, где разметка, где javascript, как помогать? по картинке должно быть?

@Dmitrin · 18.08.2016, 22:29 **[ТС]**

HTML5
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
<div class="block3">
   <div class="map_wrapper">
      <div id="map"></div>
   </div>
</div>
 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
 
<script type="text/javascript">
 
    // Задаем центр карты
    var myLatLng = {lat: 47.778474, lng: 40.147987};
    var myZoom = 14;
 
    // Иницизируем карту
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            zoom: myZoom,
            center: myLatLng,
            disableDefaultUI: true
        });
 
        var image = '/img/marker.png';
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
 
    }
</script>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.contacts .block3 {
  width: 320px;
  height: 100vh;
  float: left;
  position: relative;
}
 
.map_wrapper {
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  z-index: 2;
}
 
#map {
  height: 100vh;
  width: 100%;
  z-index: 2;
}

При клике на обертку срабатывает событие

JavaScript
1
2
3
4
5
6
7
8
9
    $(".block3 .map_wrapper ").click(function(event) {
        var width = $(".contacts .block2").outerWidth();
 
        $(".contacts .block3 .map_wrapper").animate({right:width}, 1000);
 
        var new_width = width + $(".contacts .block3").outerWidth();
 
        $("#map").width(new_width);     
    });

Как видно, меняю ширину контейнера. Но карта нормально не прогружается.

@ole_zha · 03.11.2016, 07:32

может тебе отдельно обернуть карту на z-index 0 а все остальное на z-index 1?

@we2seek · 03.11.2016, 08:57

Попробуй сделать ее не асинхронной

@Shakalaka · 03.11.2016, 10:26

Dmitrin, после изменения размера карты(её контейнера) нужно вызвать событие

JavaScript
1
 google.maps.event.trigger(map, 'resize'); // где map - instance карты

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579

	Перестроение Google Maps 16.08.2016, 11:07. Показов 1347. Ответов 6 Метки нет (Все метки) Добрый день. Подключаю карту Google, устанавливаю свой маркер. Изначально она прижата к правому краю. При клике на карту (там дополнительный блок ссылка, который исчезает при клике) карта перемещается влево и там меняется ширина карты. Но, при этом, получается так, как показано на рисунке 2. Карта как бы не прогружается. И центр смещен. Подскажите, как это можно исправить? Я думал, что можно как-то перестроить карту с новыми размерами контейнера, но пока не могу разобраться, как. Новая ширина правильно задается (800px). Миниатюры 0

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	16.08.2016, 22:16 [ТС]
	Никто не сталкивался с такой проблемой? 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	17.08.2016, 01:21
	Dmitrin, где разметка, где javascript, как помогать? по картинке должно быть? 0

@ole_zha 22 / 21 / 8 Регистрация: 11.09.2015 Сообщений: 109
	03.11.2016, 07:32
	может тебе отдельно обернуть карту на z-index 0 а все остальное на z-index 1? 1

@we2seek 84 / 84 / 42 Регистрация: 25.01.2010 Сообщений: 386
	03.11.2016, 08:57
	Попробуй сделать ее не асинхронной 1