Интеграция карты не работает

Ниже приведены две строки, которые я поместил в тег head моего html

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyC_Ii8L8wy40S8pB-eUBg13MlIOGYHXx6Y"></script>
<script src="{% static "js/mapscript.js" crossorigin="anonymous" %}"></script>

Ниже приведен скрипт, который я использую для загрузки карты в мой html. В моем html у меня есть тег div с ID равным map_canvas.

var map;
function initialize() {
    console.log("Loading map");
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(55.85361568022353, -4.288761402220929)
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

Проблема в том, что даже если я добавил API ключ и зарегистрировал биллинг для google maps, карта не отображается после использования кода выше, хотя этот код javascript попадает в цель.

Может ли кто-нибудь дать рекомендации?

Вернуться на верх