Google Map已显示但无法使用问题求助及代码说明

Hey there, let’s figure out why your Google Map is showing up but not working as expected. Based on the code you shared, here are the key fixes to try out:

• Add a valid API key and complete the script URL
  Your script tag is truncated—Google Maps requires an API key to enable full functionality. Make sure your script link includes your API key and the callback parameter, like this:

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap"></script>
  

  Also, double-check that you’ve enabled the Maps JavaScript API in your Google Cloud Console, and that your API key isn’t restricted to the wrong domain.

• Give the map container explicit dimensions
  Your <div id="map"></div> has no CSS styling, which often causes maps to render but be unresponsive. Add a height and width to the container:

  #map {
    height: 400px; /* Adjust this to your needs */
    width: 100%;
  }
  

  Without defined dimensions, the map might only show a tiny slice or fail to register user interactions like clicks or drags.

• Verify the callback function is properly linked
  The async defer attributes on your script tag are correct, but ensure the callback=initMap parameter is present in the script URL. This tells the Google Maps script to run your initMap function once it’s fully loaded.

• Check the browser console for errors
  Hit F12 to open your browser’s developer tools, then head to the Console tab. Google Maps will log specific errors here—like invalid API keys, missing permissions, or syntax issues—which are the fastest way to pinpoint the problem.

Example of Fixed Code #

Here’s how your full code should look with these fixes applied:

<!DOCTYPE html>
<html>
<head>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY&callback=initMap"></script>
  <script>
    function initMap() {
      let uluru = {lat: 42.734718, lng: 23.293138};
      let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: uluru
      });
      let marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
    }
  </script>
</body>
</html>

Start with checking the console for errors—9 times out of 10, it’ll tell you exactly what’s wrong.

内容的提问来源于stack exchange，提问作者Dennis Barzanoff