GoogleMap offsetWidth problem

Question

i have a problem with displaying GoogleMap.

Here is the website source code: http://pastebin.com/LjhVbEF7

When i'm trying to run this website, map is not displayed. Firebug console says Uncaught TypeError: Cannot read property 'offsetWidth' of null

Have you any idea what am i doing wrong? I know that there are many working examples on the net but this code is generated by a special script and i'm not able to interfere it to much. Maybe i forgot to set some variables?

thanks, Mike

=================

EDIT: This code is working only when i'll put JS in function definition and call it in body onload param. Do you have any idea how can i make it working without using such function and onload param ?

Chris Owens · Accepted Answer · 2015-06-01T06:52:41.183

21

I realise that this is probably a bit late - but hopefully it will be able to help someone else out:

In your case the initialise function is not firing, although it can also be caused by the width and height attributes not being set on the container div. If you don't want to simply add the load event to the body tag you can use the following jQuery:

//Add onload to body
$(window).load(function(){
    initialize()
});

edited Jun 01 '15 at 06:52

answered Oct 30 '11 at 05:01

Chris Owens

5,076
12
61
131

What would be an alternative if you are using a single page application? – Ray Suelzer Apr 19 '13 at 04:12
I imagine you'd just need to call initialize once the partial you're using has fully loaded. – Chris Owens Apr 13 '14 at 07:43

score 2 · Answer 2 · edited May 23 '17 at 12:18

2

Are you possibly working in AngularJS? I was, and this problem persisted past all the above solutions. The reason was that the partial where I located my map div was not completing in time, therefore the div was null, therefore the error you got.

See the Angular way to call GoogleMaps here:

Initialize Google Map in AngularJS

edited May 23 '17 at 12:18

Community

1
1

answered Oct 23 '12 at 17:07

noogrub

872
2
12
20

score 2 · Answer 3 · edited May 23 '17 at 12:18

2

This is because your script runs before loading the DOM element. A simple solution is to put it into a function and trigger it when the loading is finished. Please refer to the question below:

Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null

edited May 23 '17 at 12:18

Community

1
1

answered Jan 09 '13 at 06:50

MK Yung

4,344
6
30
35

score 2 · Answer 4 · answered Nov 19 '13 at 12:54

2

Most of the time I'm getting this error it is just because the element I'm referring to in getElementById is not on the page or I'm using the wrong id. Obvious error, but make sure to double check before diving into more advanced solutions.

answered Nov 19 '13 at 12:54

Rick Pastoor

3,625
1
21
24

score 1 · Answer 5 · edited Sep 22 '12 at 05:32

1

Try to put JavaScript code in body and AFTER div id="map_canvas"

Something like this:

<body>
    <div id="map_canvas"></div>

    <script type="text/javascript">
        var map_4e60b1f9c94ae = new google.maps.Map(document.getElementById("map_canvas"), {"mapTypeId":"roadmap","zoom":10});
        map_4e60b1f9c94ae.setCenter(new google.maps.LatLng(0, 0, 1));
    </script>
</body>

edited Sep 22 '12 at 05:32

biegleux

13,179
11
45
52

answered Sep 21 '12 at 14:11

Amok

19
2

score 1 · Answer 6 · answered Sep 02 '11 at 12:20

1

Not sure, but it could be this line

map_4e60b1f9c94ae.setCenter(new google.maps.LatLng(0, 0, 1));

I think new google.maps.LatLng takes only two attributes, the latitude and the longitude.

Try this bit from the maps site

var latlng = new google.maps.LatLng(-34.397, 150.644);

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

answered Sep 02 '11 at 12:20

Jason Gennaro

34,535
8
65
86

it's not that but i've discovered new thing. Please check the EDIT in main post :) – mbajur Sep 02 '11 at 12:48

GoogleMap offsetWidth problem

6 Answers6