Can't get Geocoder working in Google Map API

Question

I have a Google Map with 2 info boxes. The info boxes are working but the Geocoder button doesn't for some reason.

I can get the info boxes working by themselves on a page and I can get the Geocoder working by itself on a page, but I can't get them both working on the same page.

What I want is to be able to type in an address and place a pin and zoom to that location (like it does on the below link to Googles example).

The Geocoding code is from Google: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

The infobox.js is from: https://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js

Here is what's in the head:

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_REMOVED&sensor=false">
</script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var secheltLoc = new google.maps.LatLng(-27.532861,134.693340),
     markers,
        myMapOptions = {
         zoom: 7,
        center: secheltLoc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

function initMarkers(map, markerData) {
    var newMarkers = [],
        marker;

    for(var i=0; i<markerData.length; i++) {
        marker = new google.maps.Marker({
            map: map,
            draggable: false,
            position: markerData[i].latLng,
            visible: true
        }),
        boxText = document.createElement("div"),
        //these are the options for all infoboxes
        infoboxOptions = {
            content: boxText,
            disableAutoPan: false,
            zIndex: null,
            maxWidth: 0,
            boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                opacity: 0.85,
            },
            closeBoxMargin: "6px 2px 0px 0px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };

        newMarkers.push(marker);
        //define the text and style for all infoboxes
        boxText.style.cssText = "border: 1px solid black; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px";
        boxText.innerHTML = markerData[i].BusinessName;
        //Define the infobox
        newMarkers[i].infobox = new InfoBox(infoboxOptions);
        //Open box when page is loaded
        newMarkers[i].infobox.open(map, marker);
        //Add event listen, so infobox for marker is opened when user clicks on it.  Notice the return inside the anonymous function - this creates
        //a closure, thereby saving the businessname of the loop variable i for the new marker.  If we did not return the value from the inner function, 
        //the variable i in the anonymous function would always refer to the last i used, i.e., the last infobox. This pattern (or something that
        //serves the same purpose) is often needed when setting function callbacks inside a for-loop.
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                newMarkers[i].infobox.open(map, this);
                map.panTo(markerData[i].latLng);
            }
        })(marker, i));
    }

    return newMarkers;
}

        //here the call to initMarkers() is made with the necessary data for each marker.  All markers are then returned as an array into the markers variable
markers = initMarkers(map, [

{ latLng: new google.maps.LatLng(-33.878301, 150.981126), 
BusinessName: 'Vegetarian Health' },

{ latLng: new google.maps.LatLng(-33.799211, 150.926357), 
BusinessName: 'Business Name Two' }

]);

}


// Geocoder below

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>

Here is what's in the body:

<body onload="initialize()">
<div id="panel">
  <input id="address" type="textbox" value="Sydney, NSW">
  <input type="button" value="Geocode" onclick="codeAddress()">
</div>

<div style="width:850px; height: 600px" id="map_canvas"></div>
</body>

Answer 1

There is error reported:

Uncaught TypeError: Cannot read property 'setCenter' of undefined 

so it seems map is defined local. Actually, it is defined as global:

var geocoder;
var map;

but than as local again here:

geocoder = new google.maps.Geocoder();
var secheltLoc = new google.maps.LatLng(-27.532861,134.693340),
     markers,
    myMapOptions = {
        zoom: 7,
        center: secheltLoc,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);

So, that , before map should be changed to ;:

        ...
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);