Google maps 使用Google Maps Javascript API每页1张不同的地图

我在一个网站上工作，我希望在每个页面上有一个不同的谷歌地图，列出多个页面。但我不确定该怎么做。我正在使用我在W3Schools上找到的一些代码（如下所列），但他们的代码是在一个页面上显示一个地图，在一个页面上显示多个地图。我不能重复Javascript的第一个函数，尽管我在下面两次展示了它，因为它不会出现在其他页面上。也许有一种方法可以重写它以使其正常工作，但我对Javascript有点陌生

我一直在寻找这个问题，但没有找到一个与此相关的问题，只有如何为每个html文件创建多个映射

我在main.js文件中使用了这段Javascript，而不是在每个单独的页面上使用这段代码。这是我从W3学校找到的一段代码。我所做的唯一更改是复制并粘贴了函数，它包含了两次代码-

function myMap() {
  var mapCanvas = document.getElementById("map1");
  var mapOptions = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

function myMap() {
  var mapCanvas = document.getElementById("map2");
  var mapOptions = {
    center: new google.maps.LatLng(42.859822,-97.15901),
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

我在我的第一个HTML页面上使用了这段HTML-

<div id="map1" style="width:100%;height:500px"></div>

这是我的第二个-

<div id="map2" style="width:100%;height:500px"></div>

在他们的网站上找到-

正如标题中提到的，我引用的是谷歌地图Javascript API

这是我调用正在使用的文件的结构，我将这些文件放在每个HTML页面上

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="https://fonts.googleapis.com/css?family=Cardo|Roboto:100,300,500" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap">  </script>

---

一个作用域中只能有一个具有给定名称的函数。要将地图加载到单独的页面上，如果

id相同，则可以使用同一个文件，其中包含一个函数：

main.js:

function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom: 5
  };
  var map = new google.maps.Map(mapCanvas, mapOptions);
}

将其包含在页面的

中，如下所示：

<div id="map"></div>
<script type="text/javascript" src="scripts/SO_20170108_main.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

概念验证/实例

---

您有什么问题？为什么在多个页面上放置一个单一的映射会成为一个问题？我试图将Javascript放在我的外部文件中，而不是放在每个页面上。什么Javascript？什么外部文件？您如何包含该外部文件？请提供一个演示您的问题的示例。Geocodezip，对此我深表歉意。我编辑了上面的问题。我使用一个空白的外部Javascript文件来保存所需的Javascript，而不是在每个页面上放置相同的Javascript。什么是“空白外部Javascript文件”？谢谢！我如何用它制作两张不同的地图？每页一个不同的位置。您可以在页面标记中包含数据以设置地图的中心。我该怎么做？使用HTML数据属性在地图上放置标记的示例：感谢您花时间帮助我解决我的问题！这成功了！最后一个问题是，如何用Google默认标记替换自定义标记？