0
私はウェブ開発者ではないと言って始めましょう。私は通常、Java、C＃またはC++でコーディングしていますので、事前に謝っています。明らかな答えで質問しています。私はここから複数のソリューションを試しましたが、まだ働いていません。ブートストラップと組み合わせてGoogle Maps APIが初期化されない
私は、8と4の列レイアウトを持つブートストラップベースのウェブサイトを持っているという状況です。 Googleマップは、「GoogleMap.js」という名前のウェブページと同じディレクトリに保存されています。ブートストラップに関連付けられていない別のデモページでは、コードは正常に動作します。しかし、デバッグ能力の最高の点では、ブートストラップと組み合わせても初期化されません。この結論には、document.write（）ステートメントを使用して、javascript要素がロードされているかどうかをテストすることになりました。私は<script src="GoogleMap.js">と、<script>タグの内部に単にコードを埋め込むことを試みました。どちらもうまくいかない。
以下は、私がここからまとめた関連コードです。追加情報を追加する必要がある場合は可能です。あらかじめ大変ありがとうございます。
GoogleMap.js：
$(document).ready(function() {
var ZOOM_LEVEL = 8; // The initial zoom level of the google map
var MAP; // The map object used for interactions with the user
// The initalize function runs as soon as the page loads
function initialize() {
document.write("Map was initialized");
// Set the properties for our map
var mapProp = {
center: {lat: 36.4177257, lng: -83.2245912}, // This is where the map will focus
zoom: ZOOM_LEVEL, // This is the starting zoom level
mapTypeId:google.maps.MapTypeId.ROADMAP // This is the map view type
};
// Create the map object
MAP = new google.maps.Map(document.getElementById("GoogleMap"),mapProp);
}
// Listen for the browser to call for the initialization of the map
google.maps.event.addDomListener(window, 'load', initialize);
});
`
マップ-page.php：
<!DOCTYPE html>
<html>
<head>
<!-- Connect to the bootstrap cdn -->
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Connect to the google maps API -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!-- Connect to our google map JavaScript file -->
<!-- Not sure which to use here, so I have both in this example. -->
<!-- But while testing, I only use one or the other. Again, I am a very -->
<!-- in-experienced web developer -->
<script src="./GoogleMap.js"></script>
<script src="GoogleMap.js"></script>
<!-- Connect to jquery -- This is needed for bootstrap to work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Connect to bootstrap javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!-- Main Content Area -->
<div class="col-lg-8 col-md-8 col-sm-12 col-ex-12">
<!-- Display the map -->
<div id="GoogleMap" style="width:500px;height:380px;"></div>
</div> <!-- Ends Main Content Area -->
<!-- Side Bar -->
<div class="col-lg-4 col-md-4 col-sm-12 col-ex-12">
<!-- Stuff and things -->
</div> <!-- Ends Side Bar -->
</div> <!-- Ends Row -->
</div> <!-- Ends Container -->
</body>
</html>
すべてのスクリプトを閉じているbodyタグの直前に転送し、変更があるかどうかをテストしてください。 – claudios