-1

I'm getting this error when trying to display Google Maps on my page. "JavaScript runtime error: Unable to get property 'offsetWidth' of undefined or null reference"

Its coming from the Javascript function initialize() from the line var map = new google.maps.Map(document.getElementById("map-canvas")

function initialize() {
var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

Here is my html

<div id="map-canvas">
   <h2>hello</h2>
</div>

and here is my css

#map-canvas {
position: fixed;
top: 41px;
left: 0;
bottom: 0;
width: 40%;
height: 100%;
background-color: pink;
/*border: 3px solid black;*/
}
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • 2
    I got map displayed without problem. This error typically shows up when div id is different from string provided in `getElementById()`. Which browser do you have? – Anto Jurković Jun 06 '14 at 21:29
  • 1
    I got it. I had to use Chrome. Its still broken in IE. Does anyone know why? – chuckd Jun 06 '14 at 21:43
  • 1
    What did you have to do in Chrome? Can you provide a fiddle that demonstrates the issue? – geocodezip Jun 06 '14 at 22:58

1 Answers1

0

Wasn't able to reproduce the reported error, however the map in your code (as posted) doesn't have a size. Add this to your css to give the parents of the map-canvas div a size:

body, html {
    height:100%;
    width: 100%;
}

fiddle

geocodezip
  • 158,664
  • 13
  • 220
  • 245