Не отображается гугл карта

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Ответить
Kven
Сообщения: 112
Зарегистрирован: 2016.10.20, 23:03

Не отображается гугл карта

Сообщение Kven »

Всем здравствуйте! Задавал этот вопрос на тостере, но предложенные варианты ошибок не помогли, я понимаю, что у меня ошибка где-то в подключениях или даже самом скрипте карты, но разобраться самому у меня не получается. Использую на сайте Google Autocomplete, на одной из страниц должна показываться гугл карта, в верстке эта карта отображалась нормально, когда перенес на YII, то карта отображаться перестала, в консоли ошибок никаких нет! При этом если открыть в браузере просмотр кода, то вроде бы как в блоке map карта инициализируется, но по факту ее нет. Подскажите как исправить?
Функция инициализации карты gmaps.js

Код: Выделить всё

var autocompletes, marker, infowindow, map;
function initMap() {
     map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    infowindow = new google.maps.InfoWindow();

    marker = new google.maps.Marker({
      map: map
    });

    // адрес откуда
    var inputs = document.querySelector('#place_departure');
    autocompletes = new google.maps.places.Autocomplete(inputs);
    
    google.maps.event.addListener(autocompletes, 'place_changed', function () {
        marker.setVisible(false);
        infowindow.close();

        var place = autocompletes.getPlace();
        if (!place.geometry) {
            window.alert("No details available for input: '" + place.name + "'");
            return;
        }
        
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);
          }
          
          marker.setIcon(({
            url: place.icon,
            scaledSize: new google.maps.Size(35, 35)
          }));
          marker.setPosition(place.geometry.location);
          marker.setVisible(true);
          
          var place_departure = '';
          if (place.address_components) {
            place_departure = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
          }

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + place_departure);
          infowindow.open(map, marker);
    });
}
Порядок подключаемых скриптов на странице следующий
Изображение
yiiliveext
Сообщения: 910
Зарегистрирован: 2019.08.13, 01:49

Re: Не отображается гугл карта

Сообщение yiiliveext »

Оставьте в InitMap только

Код: Выделить всё

function initMap() {
     map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
}    
И посмотрите будет ли показывать карту.
Kven
Сообщения: 112
Зарегистрирован: 2016.10.20, 23:03

Re: Не отображается гугл карта

Сообщение Kven »

yiiliveext писал(а): 2019.09.11, 15:59 Оставьте в InitMap только

И посмотрите будет ли показывать карту.
Сделал как Вы сказали, но как и прежде пустой блок, карта не выводится
yiiliveext
Сообщения: 910
Зарегистрирован: 2019.08.13, 01:49

Re: Не отображается гугл карта

Сообщение yiiliveext »

Kven писал(а): 2019.09.11, 16:36
yiiliveext писал(а): 2019.09.11, 15:59 Оставьте в InitMap только

И посмотрите будет ли показывать карту.
Сделал как Вы сказали, но как и прежде пустой блок, карта не выводится
Теперь поставьте скрипт в самом простом режиме

Код: Выделить всё

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>

Ключ подставьте свой
Не забудьте сбросить кеш Ctrl+F5
Kven
Сообщения: 112
Зарегистрирован: 2016.10.20, 23:03

Re: Не отображается гугл карта

Сообщение Kven »

Теперь поставьте скрипт в самом простом режиме

Код: Выделить всё

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>

Ключ подставьте свой
Не забудьте сбросить кеш Ctrl+F5
Есть некоторый сдвиг, карты конечно нет, но хоть есть ошибка в консоли

Код: Выделить всё

Uncaught (in promise) TypeError: Cannot read property 'Autocomplete' of undefined
    at initMap (transportation:321)
    at js?key=AIzaSyAlhAeEDhvKRY-bQ2FZfOuOKfgw&callback=initMap:128
    at js?key=AIzaSyAlhAeEDhvKRY-bQ2FZfOuOKfgw&callback=initMap:128
yiiliveext
Сообщения: 910
Зарегистрирован: 2019.08.13, 01:49

Re: Не отображается гугл карта

Сообщение yiiliveext »

Ок, начнем с самого простого. Создайте экшн и вьюху, которая будет выводить только карту.

Код: Выделить всё

<div id="map"></div>
<script>
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -33.8688, lng: 151.2195},
                zoom: 13
            });
        }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
Kven
Сообщения: 112
Зарегистрирован: 2016.10.20, 23:03

Re: Не отображается гугл карта

Сообщение Kven »

Экшен с вьюхой создал, сделал как и сказали - карты нет, если посмотреть код, то вроде бы как карта инициализируется
Изображение
Ответить