0
サイズを変更：GeoComplete、モーダルでGoogleマップがマップをグレーを示し、場所は唯一の画面の後に示して、私はこの問題を解決しようとしてきた過去5時間
を私はGeoComplete jQueryプラグインを持って、私は検索が含まれていますフィールドとマップはブーストラップモーダルで、不幸にも地図が表示されません。画面のサイズを変更した後も唯一の表示となります。これは既知の問題であり、私の脅威ではこれが尋ねられましたが、私は本当にあなたの助けに感謝します！
サンプルコード（index.htmlファイルにすべてのコードをコピーしてください）
<!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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
.map_canvas { float: left; }
form { width: 300px; float: left; }
fieldset { width: 320px; margin-top: 20px}
fieldset label { display: block; margin: 0.5em 0 0em; }
fieldset input { width: 95%; }
\t #examples a {
text-decoration: underline;
}
#geocomplete { width: 200px}
.map_canvas {
width: 100%;
height: 400px;
margin: 10px 20px 10px 0;
}
#multiple li {
cursor: pointer;
text-decoration: underline;
}
.pac-container {
z-index: 10000 !important;
}
.pac-container:after {
background-image: none !important;
height: 0px;
}
.map_canvas {
float: left;
z-index: 10000 !important;
}
.pac-container {
background-color: #FFF;
z-index: 20;
position: fixed;
display: inline-block;
float: left;
}
.modal {
z-index: 20;
}
.modal-backdrop {
z-index: 10;
}
</style>
</head>
<body>
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Google Search Map </h4><h6>(Map only shows after you reseize the browser page and back) nb: Don't forget to refresh input field's value</h6>
</div>
<div class="modal-body">
\t
\t <div class="form-group">
<label for="usr">Search:</label>
<input id="geocomplete" class="form-control" type="text" placeholder="Type in an address" value="London, United Kingdom" />
<small>I have added the value (you can change it if you wish</small>
</div>
<div class="map_canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Modal button below</h3> <hr> <p></p> <p></p> <p></p> <p></p>
<button type="button" class="btn btn-danger btn-xl" data-toggle="modal" data-target="#myModal">Open Google Map Modal</button>
</div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete({
map: ".map_canvas",
details: "form",
types: ["geocode", "establishment"],
});
$("#find").click(function(){
$("#geocomplete").trigger("geocode");
});
});
</script>
</body>
</html>