Google maps API v3 initialize function - google-maps-api-3

Question

I'd like to lean up my initialize() function... but every time I do, it breaks my code.
I'm eventually trying to do something like this, where I have a sidebar with stuff that's directly related to the markers on the map, AJAX'd in... Firstly, I'd like to be able to put other functions outside of the initialize() function. This works fine:
<script>
function initialize() {
// create the map object
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// create your location marker
var mylocOptions = {
draggable: true,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage('//maps.gstatic.com/mapfiles/mobile/mobileimgs2.png',
new google.maps.Size(22,22),
new google.maps.Point(0,18),
new google.maps.Point(11,11)),
title: "You are here..."
};
var myloc = new google.maps.Marker(mylocOptions);
// get location information from browser, or from user input, or from database
<% if !signed_in? || !current_user.loc %>
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(function(pos) {
var me = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
myloc.setPosition(me);
myloc.setMap(map);
map.setCenter(me);
$.ajax({
data: { me: me.toString() },
type: 'POST',
url: '/set-location'
})
}, function(error) {
var address = prompt('Where are you looking?');
geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var me = results[0].geometry.location
myloc.setPosition(me);
myloc.setMap(map);
map.setCenter(me);
} else {
alert("Geocode was not successful for the following reason: " + status);
};
});
});
<% else %>
var me = new google.maps.LatLng(<%= current_user.loc %>);
myloc.setPosition(me);
myloc.setMap(map);
map.setCenter(me);
map.setZoom(12);
<% end %>
// watch for marker movement, and update location accordingly
var oldPos = myloc.getPosition();
google.maps.event.addListener(myloc, "dragend", function(e){
revGeo = new google.maps.Geocoder();
var newPos = myloc.getPosition();
$.ajax({
data: { me: newPos.toString() },
type: 'GET',
url: '/set-location'
})
if(oldPos != newPos)
revGeo.geocode({'latLng': newPos}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
$('#loc').html(results[1].formatted_address);
}
} else {
alert("Geocoder failed due to: " + status);
}
});
oldPos = newPos;
});
// when creating an event, check for event location,
// verify it's existance and put a marker down on the map
$(document).on('focusout', '#event_location', function() {
geocoder = new google.maps.Geocoder();
address = document.getElementById("event_location").value;
geocoder.geocode({ 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var coords = results[0].geometry.location;
map.setCenter(coords);
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: coords
});
$('#coords').html('coordinates: ' + coords)
$('#event_geocode').val(coords.toString())
} else {
alert(status + " for " + address);
};
});
});
}
</script>
... but I'm sure it can be broken up. Any ideas of what I'm doing wrong?