Почему не отображается гугл карта?

Question

[Михаил]

Всем здравствуйте! Помогите пожалуйста разобраться. Использую на сайте Google Autocomplete, на одной из страниц должна показываться гугл карта, в верстке эта карта отображалась нормально, а уже когда перенес на YII, то карта отображаться перестала, в консоли ошибок никаких нет! При этом если открыть в браузере просмотр кода, то вроде бы как в блоке 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
        });

Comments

[Дмитрий]

Добрый вечер.
Скрипты необходимо подключать в определённом порядке.
Максим показал два верных варианта.
Проверяйте, чтобы скрипт maps подключался внизу страницы, после всех js скриптов.
Возможно идёт конфликт с каким-то другим js.
Смотрите консоль браузера, читайте ошибки.

[Михаил]

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

[Дмитрий]

Сейчас я подключаю скрипт вывода карты через отдельный файл, и на сайте он подключается уже после всех js

Михаил Балагура, из Вашего огрызка кода непонятно, как и где Вы его вообще подключаете, какой он по очереди подключается... Проблема в Ваших манипуляциях и только.

Answer 1

[Максим]

В Yii скрипты должны подключаться в верстке специальным способом:

Добавляем во view:
<div id="map"></div>

<?php 
$js = <<< JS
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 8,
          center: {lat: -34.397, lng: 150.644}
        });
        var geocoder = new google.maps.Geocoder();

        document.getElementById('submit').addEventListener('click', function() {
          geocodeAddress(geocoder, map);
        });
      }

      function geocodeAddress(geocoder, resultsMap) {
        var address = document.getElementById('address').value;
        geocoder.geocode({'address': address}, function(results, status) {
          if (status === 'OK') {
            resultsMap.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
              map: resultsMap,
              position: results[0].geometry.location
            });
          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
JS;

$this->registerJs( $js, $position = yii\web\View::POS_READY, $key = null );
?>​

ВАШ ПРИМЕР

<?php 
$js = <<< 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);
        });
    }
JS;

$this->registerJs( $js, $position = yii\web\View::POS_READY, $key = null );
?>​

Добавляем в шаблон (layout)

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

Comments

[Михаил]

Максим, подключал я просто через тег script, подключил в файле вида как Вы описали, но теперь функция initMap() вообще не отрабатывает, если до этого не выводилась только карта, то сейчас вводя адрес поле input не происходит автозаполнения

<div class="col-md-4 col-sm-6 m-b30">
    <div id="map"></div>
</div>

<?php 
$js = <<< 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);
        });
    }
JS;

$this->registerJs($js, $position = yii\web\View::POS_READY, $key = null );
?>

[Максим]

Михаил Балагура, подключать нужно только через ресурсы или как показал я. Просто вставлять скрипт не даст результата.

Попробуйте скрипт обернуть в

$(document).ready(function(){
        ///код
    })

[Михаил]

Максим, с оберткой вариант не проходит. Я вынес функцию initMap в отдельный файл и подключаю теперь через AppAsset, но увы карта как не отображалась, так и не отображается, ошибок в консоли по прежнему нет.

public $js = [
    'js/gmaps.js',
    '//maps.googleapis.com/maps/api/js?key=***&libraries=places&callback=initMap',
];

[Максим]

Михаил Балагура, попробуйте сделать так

<?php 
$js = <<< JS
alert(123);
JS;

$this->registerJs( $js, $position = yii\web\View::POS_READY, $key = null );
?>​

Если сработает - проблему искать надо не в yii, а правильности кода и чтения документации.

И вижу в комментарии выше, что у вас key=*** уверен что там должен быть key, а не звездочки

[Михаил]

Максим, ответ 123 приходит при открытии, либо перезагрузке страницы. Буду думать и смотреть в чем же дело с картой. Насчет key, то я намерено поставил там звездочки.

[Максим]

Михаил Балагура, значит проблем тут нет. Единственное может быть конфликт в подключении. Если, например, какой-то скрипт выше перебивает ваш. Но я сомневаюсь в этом. Значит проблема в самом скрипте. Попробуйте поменять ширину, долготу. Тут надо копаться в гугл документации. Я обычно использую яндекс карты. Так что подсказать особо не могу в самом скрипте.

[Максим]

Михаил, нашли решение?

[Михаил]

Максим, нет, проблема так и осталась, в чем конкретно проблема - сказать не могу, не разобрался. Я попробовал ради эксперимента подключить карту на другом своем проекте, который также написан на YII2 и ситуация повторилась. При этом всем, код карты на обычной верстке у меня отрабатывает на ура!