Google Maps Javascript V3 Uncaught TypeError：无法读取属性'offsetWidth'为null [英] Google Maps Javascript V3 Uncaught TypeError: Cannot read property 'offsetWidth' of null
问题描述
$ b
我的index.html如下：
< html>< script id =employee-tpltype =text / X-车把模板>
< div class ='header'>< a href ='＃'class =button header-button header-button-left>返回< / a>< h1> Map< / h1> ;< / DIV>
< div data-role =contentid =content>
< div id =map_canvasstyle =height：100％>< / div>
< / div>
< / script>< / html>
所以这是div放置地图的index.html的一部分。所以下一部分是上面得到'编译和调用'的地方
============= EDITED ==============
var EmployeeView = function（employee）{
函数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））;
返回此;
};
this.initialize = function（）{
this.el = $（'< div />'）;
};
this.initialize（）;
google.maps.event.addDomListener（window，load，initMap）;
}
EmployeeView.template = Handlebars.compile（$（＃employee-tpl）。html（））;
所以用上面的逻辑，不知何故，我仍然得到下面的错误：（
未捕获TypeError：无法读取null的属性'offsetWidth'
有人可以启发我吗？
您需要在窗口加载中添加一个侦听器，因为它似乎在渲染之前尝试访问地图，并且获得 null 消息。
google.maps.event.addDomListener（window，'load'，initMap ）;
函数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'），myOptio ns）;
}
First of all, apologies for another of such a question but i can't seem to find a similarity between the existing questions and mine, so here I go
my index.html is as follows:
<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>
so this is a part of the index.html which the div houses the map. so the next section is where the above gets 'compiled and called'
=============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());
so with the above logic, somehow i'm still getting the error below :(
Uncaught TypeError: Cannot read property 'offsetWidth' of null
can someone enlighten me?
You need to add a listener on the window load, because it seems that you try to access to the map before it's rendered, and you get null message.
Wrap your initialisation into a function and call it like :
google.maps.event.addDomListener(window, 'load', initMap);
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);
}
这篇关于Google Maps Javascript V3 Uncaught TypeError：无法读取属性'offsetWidth'为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
