谷歌地图内容不显示在引导模式第2部分

您好Stackoverflow编码器，我创建了另一个带有表单输入的谷歌地图，收集用户地址并将其填充到地图上。我按照下面的链接创建了一个更正 Google map content not showing inside Bootstrap modal view 谷歌地图内容不显示在引导模式第2部分

但仍然我无法让地图显示在模态视图内。如果在普通页面上运行，它会没事的。有人可以帮助我吗？

感谢

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script src="http://maps.google.com/maps/api/js?libraries=places&region=ng&language=en&sensor=true&key=AIzaSyAlb3bRgk_Jq3mBzgpVyLTeeKL-RKaSkx4"></script> 

</head> 
<body> 

<div class="container"> 
    <h2>Google Map</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open MAP</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 

    <br> Address: 


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

    <div id="test" style="height: 300px;width: 100%;margin: 0.6em;"></div> 
    <!-- MAP --> 
    <script type="text/javascript"> 
    $(function getMap() { 
     var lat = 13.034118, 
     lng = 77.5679959; 
     latlng = new google.maps.LatLng(lat, lng), 
     image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 

     //zoomControl: true, 
     //zoomControlOptions: google.maps.ZoomControlStyle.LARGE, 

     var mapOptions = { 
      center: new google.maps.LatLng(lat, lng), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      panControl: true, 
      panControlOptions: { 
      position: google.maps.ControlPosition.TOP_RIGHT 
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.LARGE, 
      position: google.maps.ControlPosition.TOP_left 
      } 
     }, 
     map = new google.maps.Map(document.getElementById('test'), mapOptions), 
     marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      icon: image 
     }); 

     var input = document.getElementById('searchTextField'); 
     var autocomplete = new google.maps.places.Autocomplete(input, { 
     types: ["geocode"] 
     }); 

     autocomplete.bindTo('bounds', map); 
     var infowindow = new google.maps.InfoWindow(); 

     google.maps.event.addListener(autocomplete, 'place_changed', function(event) { 
     infowindow.close(); 
     var place = autocomplete.getPlace(); 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); 
     } 

     moveMarker(place.name, place.geometry.location); 
     $('.MapLat').val(place.geometry.location.lat()); 
     $('.MapLon').val(place.geometry.location.lng()); 
     }); 
     google.maps.event.addListener(map, 'click', function(event) { 
     $('.MapLat').val(event.latLng.lat()); 
     $('.MapLon').val(event.latLng.lng()); 
     infowindow.close(); 
     var geocoder = new google.maps.Geocoder(); 
     geocoder.geocode({ 
      "latLng": event.latLng 
     }, function(results, status) { 
      console.log(results, status); 
      if (status == google.maps.GeocoderStatus.OK) { 
      console.log(results); 
      var lat = results[0].geometry.location.lat(), 
       lng = results[0].geometry.location.lng(), 
       placeName = results[0].address_components[0].long_name, 
       latlng = new google.maps.LatLng(lat, lng); 

      moveMarker(placeName, latlng); 
      $("#searchTextField").val(results[0].formatted_address); 
      } 
     }); 
     }); 

     function moveMarker(placeName, latlng) { 
     marker.setIcon(image); 
     marker.setPosition(latlng); 
     infowindow.setContent(placeName); 
     //infowindow.open(map, marker); 
     } 
    }); 
    </script> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

</body> 
</html>

如果你的地图画布是看不见的，当地图initializd.But可以触发瓷砖使用resize.Since加载你正在使用你需要先存储在Google地图

来源

2017-01-31 nackolysis

瓷砖可能无法加载目的。

map = new google.maps.Map(document.getElementById('test'), mapOptions), 
tmp = map;

，并呼吁地图调整事件，当你的模式被显示

$('#myModal').on('shown.bs.modal', function() { 
google.maps.event.trigger(tmp, 'resize') 
})

来源

2017-02-01 09:49:48 Viney

我已经固定的代码更正到我上面，但仍张贴的代码却无法得到它的工作。我不知道什么是做错了 – nackolysis

谷歌地图内容不显示在引导模式第2部分

回答

相关问题