Хобрук: Ваш путь к мастерству в программировании

встроенная пользовательская карта Google не будет отображаться без обновления

Я создал 2 пользовательские карты Google для сайта и встроил их в фреймы на мобильном сайте: mobile.moodyplumbingmpi.com На картах отображается не пользовательская карта, а карта Южного полушария при первом просмотре путем записи зон обслуживания. Если я нажму «Обновить», отобразятся правильные карты. Интересно, не хватает ли мне какой-то команды jquery для отображения при открытии или что-то в этом роде. Я полностью застрял на этом. Любая помощь будет принята с благодарностью! Майк Вот код раздела, отображающего карты:

НазадMoody Сантехника

<article data-role="content">

  <h2>Moody Plumbing Service Area</h2>
  <ul data-role="listview" data-inset="true" data-filter="false">

  <li>
    <h3>Warren Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kQ2ZNNmaryIQ" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>

    <li>
    <h3>Youngstown Service Areas</h3>
    <iframe width="250" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU"></iframe><br /><small><a href="https://mapsengine.google.com/map/embed?mid=zaIx6P-nAOUk.kkUe66oIEZgU" style="color:#0000FF;text-align:left">View Larger Map</a></small>
    </li>

    </ul>
</article>


<nav data-role="footer">&copy; <script>new Date().getFullYear()>2010&&document.write(+new Date().getFullYear());</script> Moody Plumbing <a href="http://moodyplumbingmpi.com/mobile.php" data-role="button" data-icon="star" data-theme="a">Visit Full Site</a>
</nav>

google-maps mobile javascript embed jquery-mobile
31.03.2015

  • URL-адрес не работает. Вы уверены, что у вас нет локального DNS, который разрешает только вам? 31.03.2015
  • Как выглядит ваш код? Предоставьте минимальный, полный, проверенный и удобочитаемый пример, демонстрирующий проблему (в самом вопросе). 31.03.2015
  • Без шуток, это не разрешилось! Я ввел неверный URL. Вот правильный URL-адрес: moodyplumbingmpi.com Он перенаправляет на mobile.moodyplumbingmpi.com и предоставляет файл мобильного индекса. . Я выложил файл выше. 31.03.2015

Ответы:


1

Итак, ваша проблема заключается в том, что iFrames, содержащие карты, создаются, пока они скрыты. Это сбивает с толку API Google MapsEngine, который ожидает, что окно просмотра будет иметь правильный размер и быть видимым. Когда вы переключаете видимость iFrame с помощью кнопки «Области обслуживания», MapsEngine просто падает с масштабом 1 при широте/долготе 0,0.

Я думаю, что одним из решений является динамическая переустановка SRC iFrames при нажатии кнопки «Области обслуживания». Измените два тега iFrame, чтобы включить уникальный идентификатор:

<iframe id="location1" width="250" height="250" ...
<iframe id="location2" width="250" height="250" ...

Затем добавьте простой скрипт в HEAD HTML-документа; Я не думал об этом, это произошло из: Перезагрузите iframe с помощью jQuery

<script type="text/javascript">
$(document).on("pageshow", "#locations", function(event, data) {
    $('#location1').attr('src', function(i, val) { return val; });
    $('#location2').attr('src', function(i, val) { return val; });
});
</script>

Перезагрузка немного нервная. Таким образом, другие возможные варианты для рассмотрения включают:

  • динамически запускать обновление iFrames при нажатии кнопки «Области обслуживания»; для этого есть код в Интернете, но он работает не во всех типах браузеров.
  • Поместите пару DIV в качестве заполнителей, затем используйте javascript, чтобы вставить HTML iFrame как innerHTML DIV.
  • Найдите способ инициировать событие RESIZE карты [google.maps.event.trigger(???, "resize");], похожее на один из ответов по следующей ссылке; Я не знаю, возможно ли это с помощью MapsEngine: google карты отображаются неправильно, если не обновить

Вы должны быть уверены в сроках проведения мероприятий. РАЗДЕЛ #locations должен быть полностью виден перед выполнением любого из вышеперечисленных действий, чтобы инициализация MapsEngine работала правильно. Вам нужно будет установить событие, чтобы знать, когда SECTION стал видимым, прежде чем тыкать в iFrames (событие jQuery pageshow делает это, как показано в приведенном выше примере кода).

Наконец, я не уверен, создавали ли вы карты с помощью Google MyMaps или с помощью Google MapsEngine. Если вы действительно использовали MapsEngine, вы должны знать, что Google закрывает MapsEngine в конце 2015 года, и эти две карты перестанут работать.

31.03.2015
  • Спасибо кибермайк! Я понимаю концепции, которые вы описываете. Я новичок в javascript и могу взломать некоторый код. Я не знаю, как написать код, чтобы сделать то, что вы описываете. Первый шаг, который я могу выполнить, добавляя div следующим образом: 31.03.2015
  • ‹li› ‹h3›Области обслуживания Warren‹/h3› ‹div id=warrenMap› ‹iframe width=250 height=250 frameborder=0 scrolling=no marginheight=0 marginwidth=0 src=mapsengine.google.com/map/ /›‹small›‹ a href=mapsengine.google.com/map/embed?mid=zaIx6P -nAOUk.kQ2ZNNmaryIQ style=color:#0000FF;text-align:left›Просмотреть увеличенную карту‹/a›‹/small› ‹/div› ‹!--end warrenMap--› ‹/li› 31.03.2015
  • Написание кода для перезапуска или перерисовки карты по нажатию кнопки «Области обслуживания» Я еще недостаточно квалифицирован, чтобы писать. Любые предложения по этому поводу? Спасибо! 31.03.2015
  • Смотрите мои исправления выше к ответу. И обязательно прочитайте новый последний абзац. 01.04.2015
  • Спасибо кибермайк! Я использовал код и предложения по идентификаторам для фреймов, и это работает! Немного дергается после загрузки, но работает. Я создал карты, используя свои карты, поэтому я считаю, что это хорошо на дольше, чем в этом году. Я читал тему, карты Google не отображаются ... Сценарии выше моих знаний. Похоже, мне нужно приступить к работе и научиться этому. Я иду к источнику lynda.com для таких вещей. Это ресурс, который я использовал для изучения HMTL и CSS. Еще раз спасибо всем за помощь! Майк 01.04.2015
    • Новые материалы
    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..