Calling same function using different div ids

See more:

Javascript

CSS

HTML

Google-Maps

Trying to run the GeoCode function and call it from two different DIV IDs. It works fine with the first div (Where I'm calling it from US States drop-down list) but not with the second (Canada States drop-down list).

Javascript Code looks like this:

var geocoder;
var map;

function initialize() {

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(42, -99);
    var mapOptions = {
        zoom: 5,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
            position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Your Geo-Location',
                maxWidth: 200
            });

            var marker = new google.maps.Marker({
                position: pos,
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 5,
                },
                draggable: true,
                map: map
            });

            //Uncomment the function below if you want to change the center to the user's location
            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }
}

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);
            map.setZoom(7);
            //This is the variable thats let us display the icon on the selected location from the drop-down
            // var marker = new google.maps.Marker({
            //map: map,
            //position: results[0].geometry.location
            //});
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

HTML looks like this:

<select id="address" value="Geocode" onchange="codeAddress()">
    <option>Select</option>
    <option value="Alabama,AL">Alabama</option>
    <option value="Alaska,AK">Alaska</option>
    <option value="Arizona,AZ">Arizona</option>
    
</select>
<select id="address" value="Geocode" onchange="codeAddress()">
    <option>Select</option>
    <option value="Alberta,AB">Alberta</option>
    
</select>