Google Maps click to add marker

[pjh1985]

Hi, I am trying to setup google maps so that you can search for an address and then place a marker on the exact spot. So far i have got the address search working but i cant seem to get the markers to work.

This is the code i have so far to allow me to search the map:

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map, 
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
</script>

and this is the code i have got to add markers (FROM http://cycloloco.com/shadowmaker/shadowmaker.htm)

var map; // Must be initialized first.

function addMarker(point) {
    var image = new google.maps.MarkerImage("dynimg/1015330140/image",
        new google.maps.Size(48.0, 48.0),
        new google.maps.Point(0, 0),
        new google.maps.Point(24.0, 24.0)
    );
    var shadow = new google.maps.MarkerImage("dynimg/1015330140/shadow.png",
        new google.maps.Size(73.0, 48.0),
        new google.maps.Point(0, 0),
        new google.maps.Point(24.0, 24.0)
    );
    var marker = new google.maps.Marker({
        position: point,
        map: this.map,
        icon: image,
        shadow: shadow
    });
    
    google.maps.event.addListener(marker, 'click', function(event) {        
        marker.setMap(null);
        google.maps.event.clearInstanceListeners(marker);
    });
}

google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng);
});

I have tried to add the code to the bottom of script but it seemed to have no effect. I'm guessing the line var shadow = new google.maps.MarkerImage("dynimg/1015330140/shadow.png" should be changed to reflect the image location of the marker but that didnt work either.

Can anyone point me in the right direction please?