title: Google Maps APIv3 - adding markers via geocode
body: <p>So I've got this script where I'm trying to add markers to a map I've created with Javascript.  I think I'm pretty near to getting it right (yeah, right) but I'm not sure what I'm doing wrong and I can't seem to decipher the error I'm getting.</p>
  
  <p>The first thing I do is add the google API key to my site.</p>
  
  <p>Then, the first thing I do in my script is load the search and maps APIs:</p>
  
  <pre><code>(function ($) {
    $("document").ready(function() {
      google.load("maps", 2, {"callback": mapsLoaded});
    });
  })(jQuery);
  </code></pre>
  
  <p>After the 'maps' API has loaded, the mapsLoaded method gets called:</p>
  
  <pre><code>function mapsLoaded() {
    //Create the options for the map and imediately after create the map.
    var myOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("result_map"), myOptions);
  
    showUserLocation(map);
  
    var image = '../misc/planbMarker.png';
    var postcodes = document.getElementsByClassName('result-postcode');
    var geocoder = new google.maps.Geocoder();
    for(var i = 0; i &lt; postcodes.length; i++) {
      var address = postcodes[i].value;
      geocoder.geocode({'address': address}, function(results, status){
        if (status == google.maps.GeocoderStatus.OK) {
          var marker = new google.maps.Marker({
            map: map,
            position: results[i].geometry.location
          });
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
  </code></pre>
  
  <p>The function showUserLocation just gets the user's current location and puts it in the map:</p>
  
  <pre><code>function showUserLocation(map) {
    //Define the user's initial location
    var initialLocation;
    //Define the variable to see if geolocation is supported.
    var browserSupportFlag =  new Boolean();
    // Try W3C Geolocation (Preferred)
    if(navigator.geolocation) {
      browserSupportFlag = true;
      navigator.geolocation.getCurrentPosition(function(position) {
        initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
        map.setCenter(initialLocation);
      }, function() {
        handleNoGeolocation(browserSupportFlag);
      });
    // Browser doesn't support Geolocation
    } else {
      browserSupportFlag = false;
      handleNoGeolocation(browserSupportFlag);
    }
    function handleNoGeolocation(errorFlag) {
      if (errorFlag == true) {
        alert("Geolocation service failed. Defaulting to Aberdeen.");
        initialLocation = new google.maps.LatLng(57.149953,-2.104053);
      } else {
        alert("Your browser doesn't support geolocation. We've placed you in Aberdeen.");
        initialLocation = new google.maps.LatLng(57.149953,-2.104053);
      }
      map.setCenter(initialLocation);
    }
    //Put a marker on the user's current position different than the markers for the venues.
    navigator.geolocation.getCurrentPosition(function(position) {
      var marker = new google.maps.Marker({
      position: new google.maps.LatLng(position.coords.latitude,position.coords.longitude),
      map: map,
      title:"Hello World!"});
    });  
  } 
  </code></pre>
  
  <p>Now, the error I'm getting when I run this is: <code>Uncaught TypeError: Cannot call method 'appendChild' of null at maps:1</code> followed by: <code>Uncaught TypeError: Object #&lt;Object&gt; has no method '__gjsload__'</code> and after about 5 seconds this also pops up in the javascript console:</p>
  
  <pre><code>Error in event handler for 'undefined': TypeError: Cannot call method 'postMessage' of null
  at chrome/RendererExtensionBindings:100:18
  at chrome-extension://bmagokdooijbeehmkpknfglimnifench/contentScript.js:128:13
  at [object Object].dispatch (chrome/EventBindings:182:28)
  at chrome/RendererExtensionBindings:99:24
  at [object Object].dispatch (chrome/EventBindings:182:28)
  at Object.&lt;anonymous&gt; (chrome/RendererExtensionBindings:149:22)
  </code></pre>
  
  <p>On a sidenote, and as another possibly symptom, when this error is happening Chrome is displaying a blank page (if you go to view source the markup is all there but the page is blank). I'm running Drupal 7.10.</p>
  
  <p>Does anyone have any ideas on what I'm doing wrong?</p>