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.


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

| improve this answer | |
  • Oh snap, I totally forgot to add the div to my page, everything works fine now. Thank you. – woutr_be Feb 3 '12 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 '12 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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