Google Maps Javascript V3 Uncaught TypeError:无法读取null的属性'offsetWidth'

edd*_*ddy 1 javascript jquery google-maps google-maps-api-3

首先,为另一个这样的问题道歉,但我似乎无法找到现有问题与我之间的相似之处,所以我走了

我的index.html如下:

<html><script id="employee-tpl" type="text/x-handlebars-template">
    <div class='header'><a href='#' class="button header-button header-button-left">Back</a><h1>Map</h1></div>
    <div data-role="content" id="content">
        <div id="map_canvas" style="height:100%"></div>
    </div>    
</script></html>
Run Code Online (Sandbox Code Playgroud)

所以这是div的一部分,div包含地图.所以下一节是上面的'编译和调用'

============= EDITED ==============

var EmployeeView = function(employee){

    function initMap(){
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    };

    this.render = function(){
        this.el.html(EmployeeView.template(employee));
        return this;
    };
    this.initialize = function(){
        this.el=$('<div/>');
    };
    this.initialize();
    google.maps.event.addDomListener(window, "load", initMap);  
}

EmployeeView.template = Handlebars.compile($("#employee-tpl").html());
Run Code Online (Sandbox Code Playgroud)

所以用上面的逻辑,不知怎的,我仍然得到以下错误:(

Uncaught TypeError: Cannot read property 'offsetWidth' of null 
Run Code Online (Sandbox Code Playgroud)

有人可以开导我吗?

Bal*_*zar 6

您需要在窗口加载时添加一个侦听器,因为您似乎在渲染之前尝试访问该地图,并且您收到了null消息.

将初始化包装成函数并将其称为:

google.maps.event.addDomListener(window, 'load', initMap);
Run Code Online (Sandbox Code Playgroud)
function initMap () {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
Run Code Online (Sandbox Code Playgroud)