Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
v038449
0 / 0 / 0
Регистрация: 29.04.2016
Сообщений: 5
1

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

09.05.2016, 09:28. Просмотров 382. Ответов 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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.05.2016, 09:28
Ответы с готовыми решениями:

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

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

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

Не отображаются кнопки в google maps
Здравствуйте. Есть карта, но в ней не отображаются кнопки (см. скрин)....

Не ставится маркер места на google.maps
Здравствуйте, помогите начинающему верстальщику. Две проблемы по сайту:...

2
v038449
0 / 0 / 0
Регистрация: 29.04.2016
Сообщений: 5
11.05.2016, 08:47  [ТС] 2
Помогите кто-нибудь пожалуйста. Как впихнуть этот скрипт в блок.
0
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
11.05.2016, 10:04 3
Цитата Сообщение от 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
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.05.2016, 10:04

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

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

Сайт на wordpress, некоректно отображается в firefox
Здравствуйте! Уважаемые мастера! Подскажите пожалуйста, сайт ...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru