与Bootstrap配对时，Google Maps API未初始化

让我首先说我不是一个web开发人员。我通常用Java、C#或C++进行编码，所以我提前道歉，我问了一个有明显答案的问题。我已经尝试了多种解决方案，但还没有成功。

情况是，我有一个基于引导程序的网站，有8栏和4栏布局。我将我的谷歌地图保存在与网页相同的目录中，该网页被创造性地命名为"GoogleMap.js"。在一个单独的演示页面上，代码运行得非常好，与Bootstrap无关。但是，就调试能力而言，当与引导程序配对时，它不会初始化。我通过使用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);
});

map-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>

您应该放置您的代码

<script src="GoogleMap.js"></script>

位于页面底部的结束正文标记之前。

这里有一个例子：

    </div> <!-- Ends Container -->
    <script src="GoogleMap.js"></script>
</body>

你的谷歌地图没有初始化的原因是你在GoogleMap.js中调用了一个jQuery函数：$（document）.ready（）BEFOREjQuery本身被初始化。

相关内容

最新更新

热门标签：