admin管理员组

文章数量:1277887

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 'piled 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 = Handlebarspile($("#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?

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 'piled 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.pile($("#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?

  • javascript
  • jquery
  • google-maps
  • google-maps-api-3
Share Improve this question edited Nov 30, 2013 at 17:05 Preview 35.8k10 gold badges95 silver badges113 bronze badges asked Nov 30, 2013 at 16:14 acvonacvon 1713 gold badges6 silver badges22 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

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);
}

本文标签：

版权声明：本文标题：jquery - Google Maps Javascript V3 Uncaught TypeError: Cannot read property &#39;offsetWidth&#39; of null - Stack Overfl 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741265755a2368431.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。