Не отображается Google maps на сайте

@DanyaShag · Регистрация: 24.12.2014

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

Делаю сайт, прикрепил к пункту меню гугл карту, всё открывается без проблем, но отображается карта только в верхнем левом углу, я передвигаю - дальше не грузится. Вот полностью код сайта, может проблема в в другом. КОД КАРТЫ С 54 СТРОЧКИ

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="ua">
    <head>
        <title>Паб "Монах"</title>
        <meta charset=utf-8>
        <meta name="description" content="Restaurant Website and Gallery Template with jQuery and Google Maps" />
        <meta name="keywords" content="jquery, gallery, images, css3, html5, photography, website, template, google maps, sliding, background"/>
        <link rel="shortcut icon" href="http://sf.uploads.ru/t/JD3cf.png" type="image/x-icon">
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
        <style>
        #map-canvas {
        width: 1980px;
        height: 1280px;
      }
      </style>
    </head
    <body>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
        <div id="bf_container" class="bf_container">
            <div id="bf_background" class="bf_background">
                <img src="https://www.cyberforum.ru/images/background/default.jpg"alt="image1" style="display:none;" style="width: 1920px; left: 0px; height: 1207.5px; top: -408.75px;"/>
                <div class="bf_overlay"style="opacity:0,5;"> </div>
            </div>
            <div id="bf_page_menu" class="bf_menu" >
                <h1 class="title">Монах<span>Паб</span></h1>
                <ul>
                    <li><a href="#" data-content="home"><span class="bf_hover"></span><span>Вітаємо</span></a></li>
                    <li><a href="#" data-content="about"><span class="bf_hover"></span><span>Про нас</span></a></li>
                    <li><a href="#" data-content="map-canvas"><span class="bf_hover"></span><span>Відвідайте нас</span></a></li>
                    <li><a href="#" data-content="photogallery"><span class="bf_hover"></span><span>Фотогалерея</span></a></li>
                </ul>
            </div>
            <div class="bf_page" id="home" style="display:block;">
                <div class="bf_content_text">
                    <h2>Вітаємо</h2>
                    <p>Text</p>
                </div>
            </div>
            <div class="bf_page" id="about">
                <div class="bf_content_text">
                    <h2>Про нас</h2>
                    <p>Text</p>
                </div>
            </div>
            <div class="bf_page" id="map-canvas">
                <div class="bf_content_text">
                    <h2>Відвідайте нас</h2>
                    <li><a href="#"><script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(50.3840172,30.6901538),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
      }
      google.maps.event.addDomListener(window, 'load', initialize);
      
    </script>
                </div>
            </div>
                            <div class="bf_page" id="photogallery">
                <div class="bf_content_text">
                    <h2>Фотогалерея</h2>
                    <ul id="bf_dishes">
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/thumbs/1.jpg" alt="thumb1"/></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/thumbs/2.jpg" alt="thumb2"/></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/thumbs/3.jpg" alt="thumb3"/></a></li>
                        <li><a href="#"><img src="https://www.cyberforum.ru/images/thumbs/4.jpg" alt="thumb4"/></a></li>
                    </ul>
                </div>
                <div id="bf_gallery" class="bf_gallery">
                    <a id="bf_close" href="#" class="bf_close"></a>
                    <div class="bf_nav">
                        <a id="bf_prev" href="#" class="bf_prev"></a>
                        <a id="bf_next" href="#" class="bf_next"></a>
                    </div>
                    <div class="bf_gallery_wrapper">
                        <div class="bf_gallery_item">
                            <div class="bf_heading"><h2>Спортивна зала</h2></div>
                            <div class="bf_desc">
                                <p>Зала для спортивних івентів</p>
                            </div>
                            <img src="https://www.cyberforum.ru/images/foreground/1.jpg" alt="image1" data-bgimg="https://www.cyberforum.ru/images/background/1.jpg" />
                        </div>
                        <div class="bf_gallery_item">
                            <div class="bf_heading"><h2>Text</h2></div>
                            <div class="bf_desc">
                                <p>Text</p>
                            </div>
                            <img src="https://www.cyberforum.ru/images/foreground/2.jpg" alt="image2" data-bgimg="https://www.cyberforum.ru/images/background/2.jpg" />
                        </div>
                        <div class="bf_gallery_item">
                            <div class="bf_heading"><h2>Text</h2></div>
                            <div class="bf_desc">
                                <p>Text</p>
                            </div>
                            <img src="https://www.cyberforum.ru/images/foreground/3.jpg" alt="image3" data-bgimg="https://www.cyberforum.ru/images/background/3.jpg" />
                        </div>
                        <div class="bf_gallery_item">
                            <div class="bf_heading"><h2>Text</h2></div>
                            <div class="bf_desc">
                                <p>Text</p>
                            </div>
                            <img src="https://www.cyberforum.ru/images/foreground/4.jpg" alt="image4" data-bgimg="https://www.cyberforum.ru/images/background/4.jpg" />
                        </div>
                </div>
            </div>
            </div>
            <div class="bf_page" id="visit">
                
            </div>
        </div>
        <div class="bf_footer">
        <a class="bf_right"> Site created by Danylo Pronyuk. </a>
            <a class="bf_left"> © Monax.ua. 2015-2015. Всі права захищені. </a>
            </div>
 
 
        <!-- The JavaScript -->
        <!-- the mousewheel plugin - optional to provide mousewheel support -->
        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="js/jquery.template.min.js"></script>
    </body>
</html>

@paskalnikita · 19.01.2015, 18:50

предвигаю - масштабирую ? я правильно понимаю?

@DanyaShag · 20.01.2015, 18:10 **[ТС]**

Нет, когда передвигаю в разные стороны. Разширение 1920 на 1280

@k-x · 20.01.2015, 20:21

Проверил на всех имеющихся на компьютере браузерах. Всё нормально отображается.

@Ronnin · 21.01.2015, 10:47

Код правильный, тоже проверил - все нормально.

Очень странная проблема...

@DanyaShag · 21.01.2015, 17:46 **[ТС]**

Ребята, открываю панель кода (F12) и карта сразу грузится, перезагружаю станицу опять карта маленькая, потяну чуть чуть панель - грузится

@k-x · 21.01.2015, 18:56

DanyaShag, возможно какое-то дополнение к браузеру ведёт к конфликту стилей. Часто такое бывало со всякими ненужными тулбарами.

@DanyaShag · 21.01.2015, 19:02 **[ТС]**

Проверил - дополнений нет, проблема со всемя браузерами (IE 11, Chrome)

@k-x · 21.01.2015, 19:14

DanyaShag, приложенный скриншот и код не соответствуют друг другу. Проблема возможно именно в той части кода, который Вы не выложили.

@k-x · 21.01.2015, 19:21

судя по коду. проблема остаётся только в этих файлах:

HTML5
1
2
3
4
5
6
        <!-- The JavaScript -->
        <!-- the mousewheel plugin - optional to provide mousewheel support -->
        <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="js/jquery.template.min.js"></script>
    </body>
</html>

@DanyaShag · 21.01.2015, 20:22 **[ТС]**

k-x, это я выложил когда Ф12 включил

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	19.01.2015, 18:50
	предвигаю - масштабирую ? я правильно понимаю? 1

@DanyaShag 0 / 0 / 0 Регистрация: 24.12.2014 Сообщений: 13
	20.01.2015, 18:10 [ТС]
	Нет, когда передвигаю в разные стороны. Разширение 1920 на 1280 Миниатюры 0

@k-x 46 / 46 / 27 Регистрация: 19.05.2014 Сообщений: 117
	20.01.2015, 20:21
	Проверил на всех имеющихся на компьютере браузерах. Всё нормально отображается. 0

@Ronnin 3 / 3 / 0 Регистрация: 20.01.2015 Сообщений: 10
	21.01.2015, 10:47
	Код правильный, тоже проверил - все нормально. Очень странная проблема... 0

@DanyaShag 0 / 0 / 0 Регистрация: 24.12.2014 Сообщений: 13
	21.01.2015, 17:46 [ТС]
	Ребята, открываю панель кода (F12) и карта сразу грузится, перезагружаю станицу опять карта маленькая, потяну чуть чуть панель - грузится 0

@k-x 46 / 46 / 27 Регистрация: 19.05.2014 Сообщений: 117
	21.01.2015, 18:56
	DanyaShag, возможно какое-то дополнение к браузеру ведёт к конфликту стилей. Часто такое бывало со всякими ненужными тулбарами. 0

@DanyaShag 0 / 0 / 0 Регистрация: 24.12.2014 Сообщений: 13
	21.01.2015, 19:02 [ТС]
	Проверил - дополнений нет, проблема со всемя браузерами (IE 11, Chrome) 0

@k-x 46 / 46 / 27 Регистрация: 19.05.2014 Сообщений: 117
	21.01.2015, 19:14
	DanyaShag, приложенный скриншот и код не соответствуют друг другу. Проблема возможно именно в той части кода, который Вы не выложили. Миниатюры 0

@DanyaShag 0 / 0 / 0 Регистрация: 24.12.2014 Сообщений: 13
	21.01.2015, 20:22 [ТС]
	k-x, это я выложил когда Ф12 включил 0