API Карт Google с использованием Express и Node.js

Question

Я пытаюсь создать базовое веб-приложение, используя API карт Google с экспресс / узлом. В настоящее время мои три файла следующие:

server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express()

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs')

// Initialize and add the map
function initMap() {
    // The location of Uluru
    var uluru = {
      lat: -25.344,
      lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }

app.get('/', function (req, res) {
  res.render('index');
})

app.post('/', function (req, res) {
    res.render('index');
  })

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

style.css

#map {
    height: 400px; 
    width: 100%; 
   }

index.html

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API&callback=initMap">
</script>

Когда я запускаю приложение, возвращается ошибка «initMap - это не функция». Я читал примеры в Интернете, но все, что я пробовал, не сработало. Я хотел бы сохранить как можно меньше JavaScript-файла от моего HTML-файла.

Answer 1

В вашем коде нет ничего плохого

Работает нормально, проверьте ниже:

Решение: применить функцию initMap() к клиентскому файлу JavaScript, не в server.js

function initMap() {
    // The location of Uluru
    var uluru = {
        lat: -25.344,
        lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
        document.getElementById('map'), {
            zoom: 4,
            center: uluru
        });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}

#map {
    height: 400px; 
    width: 100%; 
}

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyALxnznHKaOFYyKB35bm1JVkhM032X9DOA&callback=initMap">
</script>


<h3>My Google Maps Demo</h3>
<div id="map"></div>

Примечание: НИКОГДА НЕ ПОДЕЛИТЕСЬ ВАШИМ API-ключом!

Answer 2

ВАЖНО: Не показывайте свой API-ключ. Люди могут взять его и использовать его для себя, и вы можете получить огромный счет.

В настоящее время вы создаете маркеры в Node.js, который является бэкендом. Используемая вами библиотека (maps.googleapis.com) используется во внешнем интерфейсе. Итак, что вы должны сделать, это новый файл javascript, на который вы указали в HTML-файле.

Пример:

index.html

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=key&callback=initMap">
</script>
<script>
function initMap() {
    // The location of Uluru
    var uluru = {
      lat: -25.344,
      lng: 131.036
    };
    // The map, centered at Uluru
    var map = new google.maps.Map(
      document.getElementById('map'), {
        zoom: 4,
        center: uluru
      });
    // The marker, positioned at Uluru
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>

Если вы не хотите встроенный javascript, создайте новый файл в том же каталоге, что и index.html, и укажите для него <script src="script.js"></script>

Надеюсь, это поможет вам