Google Map无法在Bootstrap Modal中加载的问题求助

Hey there! Let's get that Google Map working properly inside your Bootstrap Modal. I see a couple of key issues in your code that are causing the map to fail rendering correctly—let's break them down and fix them step by step.

The Core Problems #

1. Your map container has no defined dimensions: Google Maps needs a visible container with explicit width/height to render properly, and your map_canvas div doesn't have any.
2. You're initializing the map too early: When initialize() runs on document ready, the modal (and its container) is still hidden, so the map can't calculate its size correctly.
3. Resize trigger timing is off: You're using the show.bs.modal event (which fires before the modal is fully visible) instead of shown.bs.modal (which fires after it's fully rendered).

Modified Working Code #

HTML (Modal with Proper Map Container) #

<!-- Modal -->
<div id="mapModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content" style="height: 500px !important;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Map</h4>
      </div>
      <div class="modal-body">
        <!-- Added explicit dimensions to map container -->
        <div id="map_canvas" style="width: 100%; height: 100%;"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

JavaScript (Initialize Map at the Right Time) #

<!-- Uncomment this Google Maps script tag first! -->
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
  var poly;
  var map;

  // Wait for the modal to be fully shown before initializing the map
  jQuery('#mapModal').on('shown.bs.modal', function() {
    // Only initialize the map if it hasn't been created yet
    if (!map) {
      initialize();
    }
    // Trigger map resize to ensure it renders correctly in the visible container
    google.maps.event.trigger(map, "resize");
    // Optional: Re-set your map center here if it drifts after resize
    // map.setCenter(new google.maps.LatLng(yourLatitude, yourLongitude));
  }).modal('show');

  // Your map initialization function
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644) // Replace with your desired center coordinates
    };
    // Create the map instance using the now-visible container
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    // Add your polyline or other map elements here
    poly = new google.maps.Polyline({
      // Insert your polyline configuration here (e.g., path, strokeColor, etc.)
    });
  }

  // Fixed MVCArrayBinder get method (added missing return statement)
  MVCArrayBinder.prototype = new google.maps.MVCObject();
  MVCArrayBinder.prototype.get = function (key) {
    if (!isNaN(parseInt(key))) {
      return this.array_.getAt(parseInt(key));
    } else {
      return this.array_.get(key);
    }
  }

  // Add the rest of your MVCArrayBinder methods here...
});
</script>

Key Fixes Explained #

• Map Container Dimensions: The map_canvas div now has width:100%; height:100%; to fill the modal-body, which inherits the 500px height from the modal-content. This gives Google Maps a clear space to render.
• Initialize on shown.bs.modal: This event fires after the modal is fully visible, so the container's dimensions are finalized when the map is created.
• Prevent Duplicate Initialization: The if (!map) check ensures we don't create multiple map instances if the modal is opened multiple times.
• Fixed MVCArrayBinder: Your original get method was missing a return statement for non-numeric keys, which could cause errors with polyline data binding.

内容的提问来源于stack exchange，提问作者Nikul Panchal