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"
        <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 () {


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.

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

  • Oh snap, I totally forgot to add the div to my page, everything works fine now. Thank you.
    – woutr_be
    Feb 3, 2012 at 3:53
  • Glad it works - sometimes it's the simplest answers You also might want to check out drupal.org/project/gmap if you're using Drupal 6, or drupal.org/project/openlayers for integrating maps into Drupal. Both let you apply geocoded nodes to a map really easily with Views support.
    – jmking
    Feb 3, 2012 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.