Geocode function isn't executing - google-maps-api-3

Question

I'm having an issue where the geocode isn't being executed. In my html file I have the following form below that takes in the address information.
<div class="row">
<div class="col s6">
<form id="addAddress" name="address_info" method="post">
<div class="row">
<div class="input-field col s12">
<input id="address" name="address" type="text" required>
<label for="address">Address</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="city" name="city" type="text" required>
<label for="city">City</label>
</div>
<div class="input-field col s2">
<input id="state" name="state" type="text" required>
<label for="state">State</label>
</div>
<div class="input-field col s4">
<input id="zipcode" name="zipcode" type="text" required>
<label for="zipcode">Zipcode</label>
</div>
</div>
<button class="btn light-blue darken-5" type="submit" name="address_info">Submit</button>
</form>
</div>
</div>
The js file then uses the information from the form to get the latitude and longitude values. The problem I'm getting is that the geocode function doesn't execute. The console logs show the fulladdress and 'before start geo', but nothing else.
function addAddress() {
document.getElementById("addAddress").addEventListener("submit", function() {
var geocoder = new google.maps.Geocoder();
const address = document.getElementById("addAddress").elements.namedItem("address").value;
const city = document.getElementById("addAddress").elements.namedItem("city").value;
const state = document.getElementById("addAddress").elements.namedItem("state").value;
const zipcode = document.getElementById("addAddress").elements.namedItem("zipcode").value;
var fulladdress = address + ' ' + city + ' ' + state + ' ' + zipcode;
console.log(fulladdress);
console.log("before start geo");
geocoder.geocode({'address': fulladdress}, function(results,status){
console.log("start geo");
if(status == google.maps.GeocoderStatus.OK){
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
console.log(latitude, longitude);
console.log("after geo");
}
});
});
}
function main() {
addAddress();
}
document.addEventListener("DOMContentLoaded", main());
I have the js file and the google maps api with my api key linked to my html file. I have the Geocode API enabled. Any help will be appreciated thanks!
Edit:
function geolocate(address, callback){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, function(results, status){
if(status == google.maps.GeocoderStatus.OK){
callback(results[0].geometry.location.lat(), results[0].geometry.location.lng());
}
});
}
function addAddress() {
document.getElementById("addAddress").addEventListener("submit", function() {
var geocoder = new google.maps.Geocoder();
const address = document.getElementById("addAddress").elements.namedItem("address").value;
const city = document.getElementById("addAddress").elements.namedItem("city").value;
const state = document.getElementById("addAddress").elements.namedItem("state").value;
const zipcode = document.getElementById("addAddress").elements.namedItem("zipcode").value;
var fulladdress = address + ' ' + city + ' ' + state + ' ' + zipcode;
console.log(fulladdress);
console.log("before start geo");
geolocate(fulladdress, function(latitude, longitude){
console.log(latitude, longitude);
});
});
}