Make geocoding map zoom on scroll - google-maps

Question

I am looking at two different geocode examples I found and I am looking to get the best of both features. I have not had much experience with geocoding and I find the google docs hard to follow
This one does everything I want except scroll in when the user uses the mouse wheel. http://jsfiddle.net/Ep7Rr/
I would like this one if I could get the marker to move as the user drags the map like in the first one.http://jsfiddle.net/AjeTc/
I know there are different ways such as new GMap2 and new google.maps.Geocoder
The first one works with this code
<script>
function load() {
if (GBrowserIsCompatible()){
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(54.18173, -6.35284);
map.setCenter(center, 15);
geocoder = new GClientGeocoder();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function(){
var point = marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
}); /*END GEvent.addListener(marker, "dragend", function(){*/
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").innerHTML = center.lat().toFixed(5);
document.getElementById("lng").innerHTML = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").innerHTML = point.lat().toFixed(5);
document.getElementById("lng").innerHTML = point.lng().toFixed(5);
}); /*END GEvent.addListener(marker, "dragend", function() {*/
}); /*END GEvent.addListener(map, "moveend", function() {*/
} /*END if (GBrowserIsCompatible()){*/
} /*END function load*/
And the second uses this
<script type="text/javascript">
function showAddress() {
var map = new GMap2(document.getElementById("map"));
var address = document.getElementById('fullAddress').value;
return false;
} /*END function showAddress*/
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(54.18173, -6.35284);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

Catch the event when the map is dragged.
Update the position of the marker by getting the map center
Geocode the position of the marker
google.maps.event.addListener(map, 'dragend', function() {
updateMarkerStatus('Drag ended');
marker.setPosition(map.getCenter());
geocodePosition(marker.getPosition());
});
like this : http://jsfiddle.net/ZYV9N/