Google 地图 API 包含 JS V3 但无法使用

Question

我在我的 laravel 应用程序中加入了 GOOGLE MAPS V3 API 以供使用。我将脚本放入 HTML 文档的 header 中，如下所示：

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

blade 模板中结束 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 容器 class 不存在时。我认为我可以将两者排除在外。但仍然会出现错误。

Laravel 中是否有特殊的文件加载顺序会影响 blade 模板中包含文件的加载？还是我漏掉了什么？

谢谢，

塞巴斯蒂安

Answer 1

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

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

改为

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

你有 css 来设置高度和宽度 mapcanvas

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

}

Google 地图 API 包含 JS V3 但无法使用

Google Maps API JS V3 included but not working

javascript

php

google-maps-api-3

laravel

blade