Google Map API Uncaught Typeerror: Cannot Read Property 'Offsetwidth' of Null

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.

You should put your initialization code inside an onload function or at the bottom of your HTML file, just before the tag, so the DOM is completely rendered before it executes (note that the second option is more sensitive to invalid HTML).

Note, as pointed out by matthewsheets this also could be cause by the div with that id not existing at all in your HTML (the pathological case of the div not being rendered)

Adding code sample from wf9a5m75's post to put everything in one place:

<script type="text/javascript">

function initialize() {
    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.event.addDomListener(window, "load", initialize);

</script>

Google Maps JS Api: Cannot read property 'offsetwidth' of null

I found the issue: I was using a class instead of a id. Changing the class to id in css and html does solve the problem.

google maps error Uncaught TypeError: Cannot read property 'offsetWidth' of null

document.getElementById(ele) doesn't need the hash symbol, I don't think.

try

createMap(qc_1,"text Message", "1_map");

not

createMap(qc_1,"text Message", "#1_map");

google maps api v3 uncaught typeError: Cannot read property 'offsetWidth' of null

i've been on your page and i saw this :

<div id="map>

Close the property like that :

<div id="map">

It could fix some problems :)

Google Map API BackBoneJS Cannot read property 'offsetWidth' of null

I'd guess that your problem is that #mapCanvas isn't in the DOM until after you try to access it so this:

document.getElementById('mapCanvas')

will give you a useless null. You need to wait until #mapCanvas is in the DOM before using it; you can't do something like this either:

map_canvas = this.$el.find('#mapCanvas')[0];

That will give you a valid ID but you'll confuse the Google Maps functions because it won't have a size so the map will be rendered oddly. This puts you back to waiting for everything to be in the DOM before binding your Google Maps stuff.

One way around this is to use setTimeout with a delay of zero:

var _this = this;
setTimeout(function() { _this.renderMap() }, 0);

This looks strange bit it does work, this trick basically dumps your renderMap call into the browser's work queue and it'll get around to running it once you've returned control to the browser.

You can also use _.defer:

defer _.defer(function, [*arguments])

Defers invoking the function until the current call stack has cleared, similar to using setTimeout with a delay of 0. Useful for performing expensive computations or HTML rendering in chunks without blocking the UI thread from updating.

This might be a better choice as it makes your intent explicit.

---

Related Topics