Adding Google maps to a page

Question

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.

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

        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);
          }
        })

        </script>

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.

Answer 1

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".