Google Maps API 错误：MissingKeyMapError - 我有，但无法识别答案

【问题标题】：Google Maps API error: MissingKeyMapError - I do have it but it is not recognizeGoogle Maps API 错误：MissingKeyMapError - 我有，但无法识别
【发布时间】：2018-09-02 09:05:50
【问题描述】：

我有 google API 密钥，但浏览器无法识别。你可以去我的网站：rodcurvelo.com，点击联系，你会看到错误。

浏览器也说：

您已在此页面上多次包含 Google Maps API。这可能会导致意外错误。

这是我的代码：

         <div class="map-area" id="map-contact">
          <script async defer src="http://maps.googleapis.com/maps/api/js?libraries=geometry&ampsensor=false&ampkey=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8"></script>
         </div>

       <div class="hidden map-contact-body">
        <div class="map-content">
          <h4 class="no-margin-top font-alt">Iam Here</h4>
          <p><i class="fa fa-map-marker"></i> <strong>Address:</strong> 8723 Bogor, West Java</p>
          <p><i class="fa fa-mobile"></i> <strong>Phone:</strong> 87-3898-221 </p>
          <p><i class="fa fa-envelope"></i> <strong>Email:</strong> someone@company.com</p>
        </div>
      </div>
      <!--END MAP-->
      <!-- maps js -->
       <script src="http://maps.googleapis.com/maps/api/js?sensor=false"type="text/javascript"></script>
       <script src="assets/plugins/jquery.ui.map.js"></script> 


      //theme.js
      //Run function When Document Ready
      $(document).ready(function() {
         initMap();

      });

          //Map
          function initMap() {
          $('#map-contact').gmap({
          'center': '27.867473, -82.637582',
          'zoom': 15,
           scrollwheel: false,
          'disableDefaultUI': false,
          'callback': function() {
          var self = this;
          self.addMarker({
           'position': this.get('map').getCenter(),
            icon: 'assets/theme/images/marker.png'
            }).click(function() {
            self.openInfoWindow({
            'content': $('.map-contact-body').html()
          }, this);
        });
       }
     });
    }

【问题讨论】：

这不是包含密钥的有效方式：&ampkey=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8，您缺少 ;，因此它不会看到密钥。应该是&amp;key=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8 或&key=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8；正如@Roee 所指出的那样，您将其包含两次。
Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."的可能重复

标签： javascript jquery google-maps jquery-ui jquery-mobile

【解决方案1】：

您需要两次 Google Maps API；

<script async defer src="http://maps.googleapis.com/maps/api/js?libraries=geometry&ampsensor=false&ampkey=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8"></script>

还有：<script src="http://maps.googleapis.com/maps/api/js?sensor=false"type="text/javascript"></script>

尝试将它们连接在一起（参见：Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."）

另外，我不完全确定您是否使用异步延迟，据我所知它是 script async 或 script defer，而不是两者 :)

【讨论】：