Попытка заставить карты Google отображаться в Django

Мне интересно, удалось ли кому-нибудь заставить карты Google работать в проекте Django, и если да, то не могли бы они рассказать мне, что я могу делать неправильно.

В файле base.html у меня есть следующие скрипты в конце тела :

<script src="{% static '/js/script.js' %}" ></script>
<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=”API_KEY”&callback=initMap"></script>
<script src="{% static '/js/maps.js' %}" ></script>

Script.js работает нормально, map.js выполняется, но после запуска map.js элемент div не отображается.

В файле maps.js у меня есть:

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    //zoom: 3,
    zoom: 10,
    center: {
      lat: 46.619261, lng: -33.134766
    }
  });  var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";  var locations = [
    { lat: 40.785091, lng: -73.968285},
    { lat: 41.084045, lng: -73.874245},
    { lat: 40.754932, lng: -73.984016}  ];  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'});}

Похоже, что у меня нет проблем с ключом Google API. Однако у меня есть div в index.html со следующим элементом, и карта не отображается:

<div class="row">
    <!-- Map -->
    <div id="map" class="col-12"></div>    <div class="col-12 mt-2 request-page">
      <h2>Map Will Go Above Here </h2>
    </div>  </div>

Я не изменял settings.py, views.py или urls.py, чтобы приспособить карты Google, именно в этом моя ошибка?

Заранее спасибо.

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