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

Всем здравствуйте! Помогите пожалуйста разобраться. Использую на сайте 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
        });

5d775d8ed4e24698912363.png
  • Вопрос задан
  • 79 просмотров
Пригласить эксперта
Ответы на вопрос 1
maksim92
@maksim92
Нашёл ответ — пометить решением!
В 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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы