Google Map API 上的多个位置不起作用答案

【问题标题】：Multiple Location on Google Map API not workingGoogle Map API 上的多个位置不起作用
【发布时间】：2019-03-06 07:02:52
【问题描述】：

我正在使用 Google MAP API 在 google 地图上显示多个位置，我也生成了密钥，但是当我运行此代码时它给了我错误 uncaught exception: InvalidValueError: myMap is not a function.

我有没有以错误的方式做任何事情。任何一点为什么我会收到此错误

下面代码中的key取自w3schools.com

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 

  <!-- <script src="http://maps.google.com/maps/api/js?sensor=false"      type="text/javascript"></script>  -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type="text/javascript"></script> 
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    function myMap() {

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    }




      </script>

</body>
</html>

更新

如果我将本教程与我的 API_KEY 一起使用，它可以工作，但仅显示开发版本。 https://github.com/taniarascia/googlemaps

【问题讨论】：

您不断提出问题，但几乎从不接受或投票赞成您得到的任何答案。您了解本网站的运作方式吗？

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

你应该移动这条线

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type="text/javascript"></script>

在您的 myMap 函数之后。您可以将其作为<body></body> 标签中的最后一个元素。

或者您可以将其保留在原处，从 API 调用中删除 callback=myMap，然后在您的脚本中手动调用它。

您也很有可能无法使用此密钥。请勿使用密钥（您将获得“仅用于开发目的”的地图）或在您的开发者控制台中创建您自己的密钥。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
</head>

<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    function myMap() {

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, i;

      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }

    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=myMap" type="text/javascript"></script>
</body>

</html>

【讨论】：

这是一个对有效解决方案的快速否决。它如何对您“不起作用”？让我用工作代码更新我的答案...
@MrUpsidedown，即使我的问题也被否决，我也没有投反对票。讨厌人们在没有任何细节的情况下投反对票。如果我们看不到投反对票的理由，我们该如何改进。感谢任何至少回复或尝试提供帮助的人。
没关系。请参阅我的更新答案。移动我所说的那条线（并删除密钥）解决了问题。
我已经生成了自己的密钥，即使那时我只获得了开发目的。我会再试试你的代码..
好的，但这与您在原始问题中描述的问题不同。你什么时候生成那个密钥的？您应该等待几分钟以使密钥可用。您是否还为该密钥等创建了计费帐户？