Google Maps API error: MissingKeyMapError - I do have it but it is not recognize

Question

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

浏览器也说：

You have included the Google Maps API multiple times on this page. This may cause unexpected errors.

这是我的代码：

         <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);
        });
       }
     });
    }

Answer 1

您需要 Google 地图 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>

尝试将它们连接在一起（参见：）

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

Google Maps API error: MissingKeyMapError - I do have it but it is not recognize

Google Maps API error: MissingKeyMapError - I do have it but it is not recognize

javascript

jquery

google-maps

jquery-ui

jquery-mobile