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

Posted 2023-05-08

【中文标题】Google Maps API 错误：MissingKeyMapError - 我有，但无法识别

【英文标题】：Google Maps API error: MissingKeyMapError - I do have it but it is not recognize

【发布时间】：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> [e-mail]</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，您缺少 ;，因此它不会看到密钥。应该是&key=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8 或&key=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8；正如@Roee 所指出的那样，您将其包含两次。

Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors."的可能重复

【参考方案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，而不是两者 :)