Google Maps API using Express and Node.js

Question

我正在尝试使用带有express/node的谷歌地图API创建一个基本的网络应用程序。目前我的三个文件如下：

服务器.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!')
})

风格.css

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

索引.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=_____&callback=initMap">
</script>

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

注意：切勿将您的API密钥分享给任何人！

Answer 2

> IMPORANT：不要显示您的 API 密钥。人们可以拿走它并把它据为己有，你可以得到一张巨大的发票。

您当前正在做的是在后端的 Node.js 中创建标记。您使用的库 (maps.googleapis.com( 在前端使用。所以你应该做的是你在HTML文件中引用的一个新的javascript文件。

例：

索引.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>

我希望这对你有帮助