GoogleMap offsetWidth problem
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 wi开发者_C百科thout using such function and onload param ?
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()
});
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
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
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.
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
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>
加载中,请稍侯......
精彩评论