Google Maps API密钥不识别及重复引入报错求助

Hey there! Let's break down the two problems you're facing with your contact page map on rodcurvelo.com, and fix them one by one:

What's Going Wrong? #

1. MissingKeyMapError: Your API key is only included in one of the two Google Maps API script tags, and that tag has a formatting bug (ampsensor should be &sensor—that messed up how the key was being read). The second script tag doesn't include the key at all, which triggers the missing key error.
2. Duplicate API Loading: You've got two separate <script> tags pulling in the Google Maps API. This causes the browser warning you saw, and can also break map initialization since the API gets loaded twice.

Step-by-Step Fixes #

1. Remove the Duplicate API Script & Fix the Parameter Format

Delete one of the two API loading tags entirely, and clean up the remaining one to make sure the key is properly passed.

Before (broken):

<!-- First API load (has key but bad formatting) -->
<script async defer src="http://maps.googleapis.com/maps/api/js?libraries=geometry&ampsensor=false&ampkey=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8"></script>
<!-- Second API load (no key at all) -->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"type="text/javascript"></script>

After (fixed):

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8&libraries=geometry&sensor=false"></script>

• Switch to HTTPS (avoids mixed-content errors on secure sites)
• Fix the parameter separators: ampsensor is an escaped &sensor—replace it with a plain &
• Make sure the key= parameter is clear and unobstructed

2. Fix the Script Loading Order

Load your scripts in the right sequence so dependencies are ready before the map tries to initialize:

<!-- Load jQuery first (required for jquery.ui.map.js) -->
<script src="path/to/jquery.min.js"></script>
<!-- Then load the map plugin -->
<script src="assets/plugins/jquery.ui.map.js"></script>
<!-- Next load the Google Maps API (with your fixed key) -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8&libraries=geometry&sensor=false"></script>
<!-- Finally load your theme script -->
<script src="assets/theme/js/theme.js"></script>

3. Tweak the Map Initialization Logic

Since the API loads asynchronously, make sure initMap() runs only after the API is ready. You can either:

• Add &callback=initMap to the API script URL (this tells Google Maps to run your function once it's loaded), or
• Check if the API is available before calling initMap in your document.ready block.

Updated theme.js example:

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

$(document).ready(function() {
  // Only run initMap if the Google Maps API is loaded
  if (typeof google !== 'undefined' && google.maps) {
    initMap();
  }
});

4. Double-Check Your API Key Permissions

Head over to the Google Cloud Console to make sure:

• The Maps JavaScript API is enabled for your project
• Your API key has website restrictions set to allow rodcurvelo.com (this prevents unauthorized use of your key)

Final Cleaned-Up Code Snippet #

Here's how your contact page map section should look after all fixes:

<div class="map-area" id="map-contact"></div>
<div class="hidden map-contact-body">
  <div class="map-content">
    <h4 class="no-margin-top font-alt">I am 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 -->

<!-- Script Load Order -->
<script src="path/to/jquery.min.js"></script>
<script src="assets/plugins/jquery.ui.map.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwPJ1GDAq8GFIQmlMYyRFId7wRtQTFUF8&libraries=geometry&sensor=false"></script>
<script src="assets/theme/js/theme.js"></script>

内容的提问来源于stack exchange，提问作者Rodricck Curvelo