Javascript and Jquery: Adding markers for Google Maps when clicking a button

I'm trying to create a button that will add a marker to an existing google maps that is displayed.

function initialize()
{
    geocoder = new google.maps.Geocoder();
    codeAddress();
}



function codeAddress()
{
    var image_icon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
    var address = document.getElementById("type_location").value;

    geocoder.geocode( { 'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {

            var mapOptions = {
            zoom: 11,
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }

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

            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: image_icon
            });

        }           

    });

}

I'm fairly new and I was hoping someone can help me.

If I have something like this to display my maps:

$(document).ready(function() {  

var coord = $(".address").attr("data-coordinates"); //this displays lat,lng (example: 32.000,-118.000)

var geocoder;
var map;    
initialize();
$(".add_marker").click(function(){

    // this is where I should add a marker?
});

});