包含 Google Maps API JS V3 但无法正常工作答案

【问题标题】：Google Maps API JS V3 included but not working包含 Google Maps API JS V3 但无法正常工作
【发布时间】：2015-06-02 12:31:35
【问题描述】：

我在我的 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 中是否有特殊的文件加载顺序会影响刀片模板中包含文件的加载？还是我错过了什么？

谢谢，

塞巴斯蒂安

【问题讨论】：

标签： javascript php laravel google-maps-api-3 blade

【解决方案1】：

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

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

改成

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

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

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

}

【讨论】：

谢谢。这解决了这个问题。但是加载后没有显示地图。代码来自谷歌开发页面。是否应该提供更多信息来显示地图？
我刚刚得到它.. div 元素上没有宽度和高度！谢谢！！
让 css 设置 witdh 和 height off