Jsfiddle无法显示地图求助：复制网站代码后地图及搜索框异常

Hey there! Let's walk through why your JSFiddle isn't behaving like the reference site you're using. I checked out your fiddle and found a few straightforward fixes that should get things working:

1. Missing Google Maps API Key & Required Library #

Google Maps JavaScript API now requires a valid API key to function, and the search feature relies on the Places Library which needs to be explicitly loaded. Here's what to do:

• Grab an API key from Google Cloud Platform (don't forget to enable the Maps JavaScript API and Places API for your key)
• Update your script tag in the HTML section to include both the key and the library:

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
  

2. Map Container Has No Dimensions #

Your <div id="map_canvas"> doesn't have a set width or height, so the map has no space to render. Add this CSS to the Styles section:

#map_canvas {
  width: 100%;
  height: 450px; /* Adjust this to your preferred size */
}

3. Code Execution Timing Problem #

Your map initialization code runs before the page's DOM or the Google Maps API is fully loaded, which can break functionality. Wrap your entire JavaScript code in a load event listener to ensure it runs only after everything is ready:

window.onload = function() {
  // Put all your existing map and search code inside this function
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    // Your map options here (like center, zoom level)
  });

  // Initialize search autocomplete
  var input = document.getElementById('searchTextField');
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  // Add any additional logic (like placing markers on selection) here
};

4. Double-Check Search Box Element #

Make sure your HTML has the search input field with the correct id that your JavaScript references:

<input id="searchTextField" type="text" size="50">

If you work through these steps one by one, your map should render properly and the search autocomplete should start working just like the reference site.

内容的提问来源于stack exchange，提问作者Vinny Ruckle