Flask и GoogleMaps Api Javascript

Question

Я пытаюсь управлять API Карт Google, чтобы работать с Flask. Однако это не дает никаких ошибок, но и не отображает саму карту. Он отлично работает на простом. html однако Flask имеет проблемы с отображением карты. js сам файл

карта. js

    // Initiation of marker for Google Maps Api
function initMap() {
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8,
        center: {
            lat: 52.857500,
            lng: -8.987437
        }
    });

    var labels = "ABCDEFGHIJKLMONPQRSTUVWXYZ";

    var locations = [{
        lat: 52.857500,
        lng: -8.987437
    }];

    var markers = locations.map(function(location, i) {
        return new google.maps.Marker({
            position: location,
            label: labels[i % labels.length]
        });
    });

    var markerCluster = new MarkerClusterer(map, markers, {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
}

Flask Код

  {% extends 'base.html' %}
{% block content %}
<!-- content -->
  <div class="section no-pad-bot" id="index-banner">
    <div class="container">
      <br><br>
      <div class="row center"></div>

      <h2 class="header center black-text">How to approach our office ? </h2>
      <div class="row center">
        <h5 class="header col s12 light">85 Aughanteeroe<br> Gort Road <br> Ennis <br> Co. Clare<br>V95 CXV2<br>Ireland</h5>
      </div>
      <div class="row center" id="map">

        <br>

      </div>

    </div>
  </div>


<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCef1gneSCdkePrWnkXROPQUynW490rnd4&callback=initMap"></script>
<script src="{{url_for('static', filename='js/map.js')}}"></script>