Скрипт влияет на отображение карты Google

@annasha · Регистрация: 09.06.2017

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

Всех приветствую!
Собственно, я пришла из раздела HTML/CSS. Проблема такая: google-карта, вставленная через iframe, отображает не ту область, которую я ей задала.

код карты:

HTML5
1
<iframe src="https://www.google.com/maps/d/embed?mid=1cRrZ8FNYE3g3PdJ7hzHBx6g83sw" width="100%" height="480"></iframe>

шаблон сайта прикрепляю к сообщению. Если открыть index.html, то по пункту "карта" откроется google карта. Опытным путём выяснила, что конфликт с файлом modernizr.js. Если его убрать, то карта отображается корректно. Но сайт тогда плывёт. Помогите подредактировать файл modernizr.js таким образом, чтобы он не влиял на отображение iframe.

Ещё раз: проблема в том, что карте задана конкретная область отображения (там, где стоят маркеры). Но по каким-то причинам отображается совсем другое место.

Qwerty_Wasd · 10.06.2017, 21:02

annasha, в той теме я дал вам код в котором модернизр не участвует. Трабл тот же. Выходит не в нем дело. Опробуйте сами.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<a id="link1" href="#">Click me</a>
<br>
<iframe id="content1" style="display: none;" src="https://www.google.com/maps/d/embed?mid=1cRrZ8FNYE3g3PdJ7hzHBx6g83sw" width="100%" height="480" frameborder="0" style="border:0" allowfullscreen></iframe>
<script>
$(document).ready(function () {$('a#link1').click(function (e) {
            $(this).toggleClass('active');
            $('#content1').toggle();
            e.stopPropagation();});
        $('body').click(function () {
            var link = $('a#link1');
            if (link.hasClass('active')) {
                link.click();}});});
</script>
</body>
</html>

Добавлено через 1 минуту
Когда идет подключение JQ, тоже возникают проблемы

Добавлено через 1 минуту
Поэтому я думаю, что проблемы с API конструктора гугла. Так как реализованый map-движок у яндекса на гисе, пашет на ура. При всех раскладах.

Добавлено через 2 минуты
Гугловатым уже отписал. Пока тишина.

@annasha · 10.06.2017, 22:22 **[ТС]**

Сообщение от Qwerty_Wasd

дал вам код в котором модернизр не участвует. Трабл тот же. Выходит не в нем дело. Опробуйте сами.

Действительно, также выходит... Тогда я вообще не знаю... Если модернизр не виноват (хотя без него работает!) то действительно осталось винить только гугл!

Сообщение от Qwerty_Wasd

Гугловатым уже отписал. Пока тишина.

Спасибо!

Qwerty_Wasd · 10.06.2017, 22:32

annasha, Надыбал примерно как это сделать. Сейчас попробую на вашем примере. Потестю - пришлю вам правленный архив сюда в тему. Дело в

CSS
1
display:none

. Не в скриптах. Они просто используют это правило для динамики. В общем подождите немного. И да вы правы

Сообщение от annasha

винить только гугл

Ведь яндексовский движок нормально хавает конструкцию и даже не давиться.

Не по теме:

Прикол - чем больше я сталкиваюсь с продуктами гугл, тем больше мне кажется что я становлюсь IT-расистом

@annasha · 10.06.2017, 22:36 **[ТС]**

Не по теме:

:rofl: IT-расист))))) Смешно!

Qwerty_Wasd · 10.06.2017, 22:41

annasha, вот вам пока примерная мысль моя. Загружать блок, но позиционировать его за пределами экрана. по клику ставить на место.

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.noview {
  position: absolute;
  top: -99999px;
  width:60%;
  height: 480px;
}
</style>
</head>
<body>
<p><a id="link1" href="#">Click me</a></p>
<iframe id="content1" class="noview" src="https://www.google.com/maps/d/embed?mid=1cRrZ8FNYE3g3PdJ7hzHBx6g83sw" width="60%" height="480"></iframe>
<script>
$(function() {
  $('a#link1').click(function(e) {
    $(this).toggleClass('active');
    $('#content1').toggleClass('noview');
  });
 
});
</script>
</body>
</html>

Qwerty_Wasd · 11.06.2017, 11:37

annasha, мы победили

. Получите распишитесь. Решение было не мое - использовал чужую заготовку для динамической загрузки iframe. Автора не знаю к сожалению. С вашего позволения оставлю себе часть архива для следующих решений.

@annasha · 11.06.2017, 12:08 **[ТС]**

Qwerty_Wasd, Круто!!! Работает!
А расскажите, что Вы поменяли?! Я вижу внизу добавился скрипт. С его помощью меняется карта? Как это получилось?!!

Qwerty_Wasd · 11.06.2017, 12:10

annasha, эмм. Я ж написал.

Сообщение от Qwerty_Wasd

динамической загрузки iframe

@annasha · 11.06.2017, 12:12 **[ТС]**

/me сидит изучает код

Qwerty_Wasd · 11.06.2017, 12:17

Я выключил обработку ссылки

Code
1
карта

общим скриптом, оставив ей общую анимацию. И подключил ей скрипт для подключения iframe в момент клика.

Добавлено через 3 минуты
annasha,

Не по теме:

В принципе я мог просто перелопатить весь код на свой лад, под свою первую идею. Но тогда вы бы сидели бы разбирались долго с ним. И под него еще потом сайт достраивать. Мне было интересней втиснуться в ваш. Чтобы вы потом смогли и дальше работать с тем, что у вас было.

Добавлено через 1 минуту

Не по теме:

это была интересная задача. Спасибо.:rose:

@annasha · 11.06.2017, 12:29 **[ТС]**

ой, нееет, это Вам спасибо!!!
только прошу не убегайте... у меня ещё вопрос, потому что пока почему-то карта у меня не отображается при попытке вернуть это в мой проект. Сейчас ещё сижу разбираюсь в коде. Смотрите:

1. добавляем id="thebutton" к кнопке
2. добавляем

HTML5
1
<p><div id="iframediv" style="width:100%;height:480px;"></div></p>

3. внизу добавляем скрипт:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
function callIframe(url, callback) {
    jQuery('#iframediv').html('<iframe id="myid" style="width:100%;height:100%;" />');
    jQuery('iframe#myid').attr('src', url);
    jQuery('iframe#myid').load(function()
    {
        callback(this);
    });
}
// Пример использования:
jQuery('#thebutton').click(function(){
    callIframe('https://www.google.com/maps/d/embed?mid=1cRrZ8FNYE3g3PdJ7hzHBx6g83sw', function(){});
});
</script>

Запускаю, не работает на моём проекте. Вы меняли ещё что-нибудь из папки css или js?

Qwerty_Wasd · 11.06.2017, 12:38

annasha, я ж вам скинул ваш же архив - он рабочий. CSS и JS папки не трогал.

Добавлено через 1 минуту
Оттолкнитесь от моего варианта и достройте недостающее.

Добавлено через 1 минуту

Сообщение от annasha

id="thebutton" к кнопке

не к кнопке, а к ссылке.

Добавлено через 3 минуты
В хед не забудьте

HTML5
1
<script src="http://code.jquery.com/jquery-latest.js"></script>

@annasha · 11.06.2017, 12:48 **[ТС]**

HTML5
1
<script src="http://code.jquery.com/jquery-latest.js"></script>

Да!

Добавлено через 1 минуту
А я сижу и думаю - ну неужели я такая тупая.... скопировать код из одной странички в другую не могу?!! Там работает, здесь - нет!

Qwerty_Wasd, ГРОМАДНОЕ Вам СПАСИБО!!!

Qwerty_Wasd · 11.06.2017, 12:50

annasha, удачи))

@annasha · 11.06.2017, 12:51 **[ТС]**

В связи с чем ещё бонусный вопрос, так как в js я не разбираюсь. Раз мы добавили в проект

HTML5
1
<script src="http://code.jquery.com/jquery-latest.js"></script>

то нужно ли вот это:

HTML5
1
<script src="js/jquery-2.1.1.js"></script>

?
Можно удалять или нужно всё-таки оставить эту строчку?

Qwerty_Wasd · 11.06.2017, 12:54

да можно удалить

@annasha · 11.06.2017, 12:55 **[ТС]**

Qwerty_Wasd, с мобильника не работает

Qwerty_Wasd · 11.06.2017, 14:14

annasha, мобильник какой? Как проверяли? Ссылку на сайт.

@annasha · 11.06.2017, 14:45 **[ТС]**

Проверяла Ctrl+Shift+M в лисе и хроме. Именно мобильником не открывала, просто ужимала размер экрана. У Вас открывается норм?

Новые блоги и статьи Все статьи Все блоги /
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .

@annasha
	10.06.2017, 22:36 [ТС]
	Не по теме: :rofl: IT-расист))))) Смешно! 0

@annasha 1 / 1 / 0 Регистрация: 09.06.2017 Сообщений: 72
	11.06.2017, 12:08 [ТС]
	Qwerty_Wasd, Круто!!! Работает! А расскажите, что Вы поменяли?! Я вижу внизу добавился скрипт. С его помощью меняется карта? Как это получилось?!! 0

@annasha 1 / 1 / 0 Регистрация: 09.06.2017 Сообщений: 72
	11.06.2017, 12:12 [ТС]
	/me сидит изучает код 1

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	11.06.2017, 12:50
	annasha, удачи)) 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	11.06.2017, 12:54
	да можно удалить 0

@annasha 1 / 1 / 0 Регистрация: 09.06.2017 Сообщений: 72
	11.06.2017, 12:55 [ТС]
	Qwerty_Wasd, с мобильника не работает 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	11.06.2017, 14:14
	annasha, мобильник какой? Как проверяли? Ссылку на сайт. Миниатюры 0

@annasha 1 / 1 / 0 Регистрация: 09.06.2017 Сообщений: 72
	11.06.2017, 14:45 [ТС]
	Проверяла Ctrl+Shift+M в лисе и хроме. Именно мобильником не открывала, просто ужимала размер экрана. У Вас открывается норм? 0