Cannot read property 'offsetWidth' of null gmaps4rails sidebar example

Question

All code exactly from http://apneadiving.github.io/

Here is my HTML

<div style='width: 800px;'>
  <div id="one_marker" style='width: 800px; height: 400px;'></div>
</div>
<div id='sidebar_container'>
</div>

Here is my javascript:

function createSidebarLi(json){
  return ("<li><a>" + json.name + "</a></li>");
};

function bindLiToMarker($li, marker){
  $li.on('click', function(){
    handler.getMap().setZoom(14);
    marker.setMap(handler.getMap()); //because clusterer removes map property from marker
    marker.panTo();
    google.maps.event.trigger(marker.getServiceObject(), 'click');
  })
};

function createSidebar(json_array){
  _.each(json_array, function(json){
    var $li = $( createSidebarLi(json) );
    $li.appendTo('#sidebar_container');
    bindLiToMarker($li, json.marker);
  });
};

handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'sidebar_builder'}}, function(){
  var json_array = [
    { lat: 40, lng: -80, name: 'Foo', infowindow: "I'm Foo" },
    { lat: 45, lng: -90, name: 'Bar', infowindow: "I'm Bar" },
    { lat: 50, lng: -85, name: 'Baz', infowindow: "I'm Baz" }
  ];

  var markers = handler.addMarkers(json_array);

  _.each(json_array, function(json, index){
    json.marker = markers[index];
  });

  createSidebar(json_array);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

The error I receive is:

Cannot read property 'offsetWidth' of null

I have also tried:

function initialize() {
  function createSidebarLi(json){
    return ("<li><a>" + json.name + "</a></li>");
  };

  function bindLiToMarker($li, marker){
    $li.on('click', function(){
      handler.getMap().setZoom(14);
      marker.setMap(handler.getMap()); //because clusterer removes map property from marker
      marker.panTo();
      google.maps.event.trigger(marker.getServiceObject(), 'click');
    })
  };

  function createSidebar(json_array){
    _.each(json_array, function(json){
      var $li = $( createSidebarLi(json) );
      $li.appendTo('#sidebar_container');
      bindLiToMarker($li, json.marker);
    });
  };

  handler = Gmaps.build('Google');
  handler.buildMap({ internal: {id: 'sidebar_builder'}}, function(){
    var json_array = [
      { lat: 40, lng: -80, name: 'Foo', infowindow: "I'm Foo" },
      { lat: 45, lng: -90, name: 'Bar', infowindow: "I'm Bar" },
      { lat: 50, lng: -85, name: 'Baz', infowindow: "I'm Baz" }
    ];

    var markers = handler.addMarkers(json_array);

    _.each(json_array, function(json, index){
      json.marker = markers[index];
    });

    createSidebar(json_array);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
}
google.maps.event.addDomListener(window, "load", initialize);

Did you see this? http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth-of-null "This problem is usually due to the map div not being rendered before the javascript runs that needs to access it." — Arthur Frankel, Jul 13 '14 at 00:27
Yes, I did, and modified my code, and still received the same error :( — Abram, Jul 13 '14 at 00:31
your internal id doesn't match - 'sidebar_builder' doesn't equal 'sidebar_container' - based on looking at example here where they use a div id of 'map' - https://github.com/apneadiving/Google-Maps-for-Rails — Arthur Frankel, Jul 13 '14 at 00:43
OK thank for tipping me off to this. The real problem was that one_marker needed to be changed to sidebar_builder. Hopefully the live demo code is updated for this. — Abram, Jul 13 '14 at 00:48

score 1 · Answer 1 · answered Jul 13 '14 at 00:49

1

I basically needed to change one_marker to sidebar_builder in the HTML

<div>
  <div id="sidebar_builder" style="height:400px;"></div>
</div>
<div id='sidebar_container'>
</div>

answered Jul 13 '14 at 00:49

Abram

39,950
26
134
184

was the documentation misleading? – apneadiving Jul 14 '14 at 09:08

Cannot read property 'offsetWidth' of null gmaps4rails sidebar example

1 Answers1