谷歌地图API JS V3包含但不起作用 - Google Maps API JS V3 included but not working

Google Maps API JS V3 included but not working

我在我的laravel应用程序中包含了GOOGLE MAPS V3 API。我将脚本放入HTML文档的标题中，如下所示：

<head>
    <!-- Store Meta information -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{ asset('/css/main.css') }}" rel="stylesheet">
    <!-- Import Scripts  -->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={{ Config::get('customconfig.googleMapsApiKey')}}"></script>
    <title>MEDIFAKTOR</title>
</head>

在刀片模板中关闭BODY标记之前的一个自定义JS文件，如下所示：

<!DOCTYPE html>
<html lang="en">
<!-- Head Data -->
@include('includes.head')
<body>
<!-- Header -->
<header class="main-header">
    <a class="logo" href=""><b>MEDIFAKTOR</b>server</a>
    @include('includes/navBar')
</header>
<!-- Body -->
<div class="pageContainer">
    <!-- Sidebar -->
    <div class="pageSidebarWrapper">
        @include('includes.sidebar')
    </div>
    <!-- Content -->
    <div class="pageContentWrapper">
        <div class="pageContent">
            <div class="mapcanvas"></div>
            @include('includes.content')
        </div>
    </div>
</div>
<script type="text/javascript" src="js/googleMaps.js"></script>
</body>
</html>

googleMaps.js

var map;
function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(-34.397, 150.644)
    };
    map = new google.maps.Map(document.getElementById('mapcanvas'),
        mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

当我加载页面时，我收到错误消息：

Uncaught TypeError: Cannot read property 'offsetWidth' of null

据我所知，这种情况通常发生在页面未完全加载或我在JS脚本中搜索的div容器类不存在时。我想我可以把两者都排除在外。但错误仍然存在。

Laravel中是否存在影响刀片模板中包含文件加载的特殊文件加载顺序？还是我错过了别的东西？

谢谢你，

Sebastian

代码中的

没有任何元素id="mapcanvas"在你的html代码更改

<div class="mapcanvas"></div>

更改为

<div id="mapcanvas"></div>

您是否有css来设置mapcanvas的高度和宽度

#mapcanvas{
    height: 400px;
    witdh: 500px;
}