Adding Google maps to a page I'm trying to add google maps into the header of a view, nothing fancy, as I just used the demo code from the google maps page.

&lt;script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=myKey"
          type="text/javascript"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;

        jQuery(document).ready(function() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.4419, -122.1419), 13);

            var marker = new GMarker(map.getCenter());
            GEvent.addListener(marker, "click", function () {
              marker.openInfoWindowHtml("Hello");
            });
            map.addOverlay(marker);
          }
        })

        &lt;/script&gt;


But for some reason I'm getting this error:


  Uncaught TypeError: Cannot read property 'firstChild' of null


I have no idea what is going wrong.
Do you have an HTML element with the id of "map_canvas" anywhere on the page?

Also I'm assuming you actually have your API key in your first script tag and it doesn't actually say "myKey".