Google Map in Modal nicht angezeigt

Question

Ich habe eine modale, wo, wenn es angeklickt wird die Karte angezeigt, aber die Karte funktioniert nicht, aber stattdessen ein graues Bild angezeigt wird.

mein sript ist von Google Auto vervollständigen Orte, wenn die Karte nicht innerhalb der Modal ist, funktioniert es völlig in Ordnung.

<script> 
      // This example adds a search box to a map, using the Google Place Autocomplete 
      // feature. People can enter geographical searches. The search box will return a 
      // pick list containing a mix of places and predicted search terms. 

      // This example requires the Places library. Include the libraries=places 
      // parameter when you first load the API. For example: 
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 
var map; 

      function initAutocomplete() { 
       map = new google.maps.Map(document.getElementById('map'), { 
        center: {lat: -33.8688, lng: 151.2195}, 
        zoom: 13, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       // Create the search box and link it to the UI element. 
       var input = document.getElementById('pac-input'); 
       var searchBox = new google.maps.places.SearchBox(input); 
       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

       // Bias the SearchBox results towards current map's viewport. 
       map.addListener('bounds_changed', function() { 
        searchBox.setBounds(map.getBounds()); 
       }); 

       var markers = []; 
       // Listen for the event fired when the user selects a prediction and retrieve 
       // more details for that place. 
       searchBox.addListener('places_changed', function() { 
        var places = searchBox.getPlaces(); 

        if (places.length == 0) { 
         return; 
        } 

        // Clear out the old markers. 
        markers.forEach(function (marker) { 
         marker.setMap(null); 
        }); 
        markers = []; 

        // For each place, get the icon, name and location. 
        var bounds = new google.maps.LatLngBounds(); 
        places.forEach(function (place) { 
         var icon = { 
          url: place.icon, 
          size: new google.maps.Size(71, 71), 
          origin: new google.maps.Point(0, 0), 
          anchor: new google.maps.Point(17, 34), 
          scaledSize: new google.maps.Size(25, 25) 
         }; 

         // Create a marker for each place. 
         markers.push(new google.maps.Marker({ 
          map: map, 
          icon: icon, 
          title: place.name, 
          position: place.geometry.location 
         })); 

         if (place.geometry.viewport) { 
          // Only geocodes have viewport. 
          bounds.union(place.geometry.viewport); 
         } else { 
          bounds.extend(place.geometry.location); 
         } 
        }); 
        map.fitBounds(bounds); 
       }); 

      } 

function resize(){ 

      $('#myModal').on('shown', function() { 
       google.maps.event.trigger(map, "resize"); 
      }); 
} 

     </script> 

Ich habe versucht, diese Similar Question tun, aber es gibt mir

Uncaught ReferenceError: $ is not defined

 // This example adds a search box to a map, using the Google Place Autocomplete 
 
      // feature. People can enter geographical searches. The search box will return a 
 
      // pick list containing a mix of places and predicted search terms. 
 

 
      // This example requires the Places library. Include the libraries=places 
 
      // parameter when you first load the API. For example: 
 
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 
 
      var map; 
 

 
      function initAutocomplete() { 
 
       map = new google.maps.Map(document.getElementById('map'), { 
 
        center: {lat: -33.8688, lng: 151.2195}, 
 
        zoom: 13, 
 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
 
       }); 
 

 
       // Create the search box and link it to the UI element. 
 
       var input = document.getElementById('pac-input'); 
 
       var searchBox = new google.maps.places.SearchBox(input); 
 
       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
       // Bias the SearchBox results towards current map's viewport. 
 
       map.addListener('bounds_changed', function() { 
 
        searchBox.setBounds(map.getBounds()); 
 
       }); 
 

 
       var markers = []; 
 
       // Listen for the event fired when the user selects a prediction and retrieve 
 
       // more details for that place. 
 
       searchBox.addListener('places_changed', function() { 
 
        var places = searchBox.getPlaces(); 
 

 
        if (places.length == 0) { 
 
         return; 
 
        } 
 

 
        // Clear out the old markers. 
 
        markers.forEach(function (marker) { 
 
         marker.setMap(null); 
 
        }); 
 
        markers = []; 
 

 
        // For each place, get the icon, name and location. 
 
        var bounds = new google.maps.LatLngBounds(); 
 
        places.forEach(function (place) { 
 
         var icon = { 
 
          url: place.icon, 
 
          size: new google.maps.Size(71, 71), 
 
          origin: new google.maps.Point(0, 0), 
 
          anchor: new google.maps.Point(17, 34), 
 
          scaledSize: new google.maps.Size(25, 25) 
 
         }; 
 

 
         // Create a marker for each place. 
 
         markers.push(new google.maps.Marker({ 
 
          map: map, 
 
          icon: icon, 
 
          title: place.name, 
 
          position: place.geometry.location 
 
         })); 
 

 
         if (place.geometry.viewport) { 
 
          // Only geocodes have viewport. 
 
          bounds.union(place.geometry.viewport); 
 
         } else { 
 
          bounds.extend(place.geometry.location); 
 
         } 
 
        }); 
 
        map.fitBounds(bounds); 
 
       }); 
 

 
      } 
 

 

 

 

 
$(document).ready(function() { 
 
       $('#myModal').on('shown', function() { 
 
        google.maps.event.trigger(map, "resize"); 
 
       }); 
 
      });

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
     <body> 
 
     <button class="btn" data-toggle="modal" data-target="#myModal"/>Show Modal</button> 
 
     <!--MODAL--> 
 
     <div id="myModal" class="modal fade" role="dialog"> 
 
      <div class="modal-dialog"> 
 
       <div class="modal-content"> 
 
        <div class="modal-header"> 
 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
         <h4 class="modal-title">Warning!</h4> 
 
        </div> 
 
        <div class="modal-body" id="modal-body"> 
 

 
         <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
         <div id="map" style="width: 580px; height:400px"></div> 
 
        </div> 
 
        <div class="modal-footer" id="modal-footer"> 
 

 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADR3ipXgTLZd7uIcl3NBUujxF3kKp9rFk&libraries=places&callback=initAutocomplete" 
 
     async defer></script> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      
 
      </body> 
 
</html>

Answer 1

var map; 

function initAutocomplete() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -33.8688, lng: 151.2195}, 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // .... 
} 
$(function() { 
    $('#myModal').on('shown', function() { 
     google.maps.event.trigger(map, "resize"); 
    }); 
}); 

Sie haben

gewickelt

google.maps.event.trigger(map, "resize"); 

innerhalb function resize() {}, die nie ausgeführt wird. Versuchen Sie es stattdessen mit jQuery 's zu wickeln.

Answer 2

Diese Art fo Fehler (wird $ nicht definiert ist) bedeutet, dass Sie haben kein Java initialisiert Ascript-Bibliothek in Ihrem Code.

und wie Sie verwenden:

$('#myModal').on('shown', function() { 
      google.maps.event.trigger(map, "resize"); 
     }); 

müssen Sie jquery am Anfang des Skripts hinzuzufügen. Etwas wie folgt aus:

Sie Informationen hier finden können: w3schools jquery init

zunächst den js Fehler zu lösen und möglicherweise wird die Karte laden.