В 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>
Простой
