[Solved] Strange! Google Maps : OffsetWidth not found

Hi everyone!

I’m having an issue with Google Maps where I am unable to figure out. Here is what’s going on!

I have a app layout for the module ‘Suggest A Place’ where there are 3 steps in total and are separated to the state name step-1, step-2 and step-3 respectively. The map is located on step-2.

So on the first round of testing, with the help of $stateChangeSuccess, I managed to trigger the initialize function to generate my map which works perfectly. However, here’s where the weird issue I’m having comes into the picture.

Realistically, I would like to have the module to be able to jump back and forth between the steps to allow users to change the form in the scenario where they made a mistake and want to make changes.

However, when I change steps (state) and return to step-2 (the state with the map to-be-generated) it throws an error that looks abit like this.

TypeError: Cannot read property ‘offsetWidth’ of null

I understand that the error above is thrown in the case where the div element for the map is not loaded and is unable to retrieve the offsetWidth but in my case, the initialize function is triggered upon $stateChangeSuccess which worked for the initial case.

So what I’m asking here is whether there is a solution for this weird behaviour?


I used $timeout to trigger the initialization upon state change and it worked like a charm.

Hope this helps someone!