Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
0 / 0 / 0
Регистрация: 29.04.2016
Сообщений: 5

Не отображается скрипт google maps в wordpress

09.05.2016, 09:28. Показов 1981. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем привет, есть такой скрипт:

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
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel modes in directions</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
    <b>Mode of Travel: </b>
    <select id="mode">
      <option value="DRIVING">Driving</option>
      <option value="WALKING">Walking</option>
      <option value="BICYCLING">Bicycling</option>
      <option value="TRANSIT">Transit</option>
    </select>
    </div>
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: 37.77, lng: -122.447}
        });
        directionsDisplay.setMap(map);
 
        calculateAndDisplayRoute(directionsService, directionsDisplay);
        document.getElementById('mode').addEventListener('change', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });
      }
 
      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var selectedMode = document.getElementById('mode').value;
        directionsService.route({
          origin: {lat: 37.77, lng: -122.447},  // Haight.
          destination: {lat: 37.768, lng: -122.511},  // Ocean Beach.
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode[selectedMode]
        }, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>
Когда вставляю его просто, как html страничку - работает отлично, показывает карту, маршрут...ну все как нужно.

Вставляю его в страничку в вордпрессе, самоц карты нету, только менюшка выбора метода как добраться

Вот как открывается в вордпрессе и вот как открывается просто html

Помогите пожалуйста разобраться, как это впихнуть на страничку WP, желательно не на всю страничку, а просто как блок.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
09.05.2016, 09:28
Ответы с готовыми решениями:

Не отображается Google maps на сайте
Делаю сайт, прикрепил к пункту меню гугл карту, всё открывается без проблем, но отображается карта только в верхнем левом углу, я...

Google maps
что нужно удалить вкоде google maps,чтобы не отображалось выделенное на скрине ?

Корректный скролл Google maps
Подгрузил карту google maps используя iframe, сделав ее по ширие 100%. Тоесть на определенном участке ландинга карта растянута на всю...

2
0 / 0 / 0
Регистрация: 29.04.2016
Сообщений: 5
11.05.2016, 08:47  [ТС]
Помогите кто-нибудь пожалуйста. Как впихнуть этот скрипт в блок.
0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
11.05.2016, 10:04
Цитата Сообщение от v038449 Посмотреть сообщение
Помогите кто-нибудь пожалуйста. Как впихнуть этот скрипт в блок.
Я так понял, вы вставляете всю эту байду через WYSIWYG редактор. Так делать нельзя. Создаете страницу в ВП, туда вставляете разметку, в вашем случае
HTML5
1
2
3
4
5
6
7
8
9
10
<div id="floating-panel">
    <b>Mode of Travel: </b>
    <select id="mode">
      <option value="DRIVING">Driving</option>
      <option value="WALKING">Walking</option>
      <option value="BICYCLING">Bicycling</option>
      <option value="TRANSIT">Transit</option>
    </select>
</div>
<div id="map"></div>
А скрипт и стили подключаете в файле шаблона
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
11.05.2016, 10:04
Помогаю со студенческими работами здесь

Не отображаются кнопки в google maps
Здравствуйте. Есть карта, но в ней не отображаются кнопки (см. скрин). Подскажете что это? Вот код: function initialize() { ...

Не ставится маркер места на google.maps
Здравствуйте, помогите начинающему верстальщику. Две проблемы по сайту: http://searchwork-nik.myjino.ru/pink 1. В IE (10-11 и выше)...

Google Maps указывающий на адрес моей компании
Здраствуйте, делаю сайт (на html) и во вкладке КОНТАКТЫ хочу прикрепить карту Google Maps, которая будет указывать на адрес моей...

Как открыть карту на яндекс.карты или google maps
Всем привет. Не могу найти ответ на вопрос. Представьте, что Пользователь вводит адрес в инпут и нажимает кнопку сохранить, а на другой...

Google Maps API v2. Не отображается карта
Доброго времени суток. На днях решил поработать с Google API Maps. И столкнулся с такой проблемой. Создал приложение, создал API Key...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru