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

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

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

Всех приветствую!
Собственно, я пришла из раздела 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

<!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

<!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

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

Код

карта

общим скриптом, оставив ей общую анимацию. И подключил ей скрипт для подключения 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

<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 в лисе и хроме. Именно мобильником не открывала, просто ужимала размер экрана. У Вас открывается норм?

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

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

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

@annasha 1 / 1 / 0 Регистрация: 09.06.2017 Сообщений: 72
	10.06.2017, 22:22 [ТС]	3
	Сообщение от Qwerty_Wasd дал вам код в котором модернизр не участвует. Трабл тот же. Выходит не в нем дело. Опробуйте сами. Действительно, также выходит... Тогда я вообще не знаю... Если модернизр не виноват (хотя без него работает!) то действительно осталось винить только гугл! Сообщение от Qwerty_Wasd Гугловатым уже отписал. Пока тишина. Спасибо! 0

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

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

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	11.06.2017, 12:10	9
	annasha, эмм. Я ж написал. Сообщение от Qwerty_Wasd динамической загрузки iframe 0

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

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	11.06.2017, 12:17	11
	Я выключил обработку ссылки Код карта общим скриптом, оставив ей общую анимацию. И подключил ей скрипт для подключения iframe в момент клика. Добавлено через 3 минуты annasha, Не по теме: В принципе я мог просто перелопатить весь код на свой лад, под свою первую идею. Но тогда вы бы сидели бы разбирались долго с ним. И под него еще потом сайт достраивать. Мне было интересней втиснуться в ваш. Чтобы вы потом смогли и дальше работать с тем, что у вас было. Добавлено через 1 минуту Не по теме: это была интересная задача. Спасибо.:rose: 0

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

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