ReferenceError: Google не определяется при обновлении страницы и удалении кэша

Question

Я занимаюсь веб-сайтом по обслуживанию автобусов, прокату автомобилей и посылок.Существует раздел под названием «centrales», в котором вы можете использовать карту Google, объединенную с этим примером:
http://jsfiddle.net/maunovaha/jptLfhc8/

Чтобы увеличить различные местоположения офисов и центральных офисов.с теми же координатами.

Проблема, с которой я столкнулся, заключается в том, что при выполнении (команда + r) карта отображается без ошибок.Но если я это сделаю (shift + command + r), он не появится и выдает ошибку ReferenceError: Google не определен.Это страница: http://allabordo.borealstudio.mx/centrales.shtml

Мой javascript на центральной странице выглядит следующим образом:

<script>
function initMap(){
  //
}
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=aquiVaMiLlave&callback=initMap" async defer></script>

И тот, который у меня есть в custom.js для увеличения:

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

function ZoomControl(controlDiv, map) {

controlDiv.style.padding = '5px';
var controlWrapper = document.createElement('div');
controlWrapper.style.backgroundColor = 'white';
controlWrapper.style.borderStyle = 'solid';
controlWrapper.style.borderColor = 'gray';
controlWrapper.style.borderWidth = '1px';
controlWrapper.style.cursor = 'pointer';
controlWrapper.style.textAlign = 'center';
controlWrapper.style.width = '32px'; 
controlWrapper.style.height = '64px';
controlDiv.appendChild(controlWrapper);

var zoomInButton = document.createElement('div');
zoomInButton.style.width = '32px'; 
zoomInButton.style.height = '32px';

zoomInButton.style.backgroundImage = 'url("http://placehold.it  /32/00ff00")';
controlWrapper.appendChild(zoomInButton);

var zoomOutButton = document.createElement('div');
zoomOutButton.style.width = '32px'; 
zoomOutButton.style.height = '32px';

zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
controlWrapper.appendChild(zoomOutButton);

google.maps.event.addDomListener(zoomInButton, 'click', function() {
map.setZoom(map.getZoom() + 1);
});

google.maps.event.addDomListener(zoomOutButton, 'click', function() {
map.setZoom(map.getZoom() - 1);
});  

}

function initialize() {
var mapDiv = document.getElementById('map');

var mapOptions = {
zoom: 12,
center: chicago,

disableDefaultUI: true,

}

map = new google.maps.Map(mapDiv, mapOptions);


var zoomControlDiv = document.createElement('div');
var zoomControl = new ZoomControl(zoomControlDiv, map);

 zoomControlDiv.index = 1;                                      
                map.controls[google.maps.ControlPosition.TOP_LEFT].push(zoomControlDiv);
 }

initialize();

Answer 1

Проблема в том, что вы загружаете скрипт Google Map async , поэтому ваш скрипт выполняется до определения карты Google

Просто удалите async defer ипоместите свой код после включения сценария.Это должно решить проблему