Upgrade Google-Maps API from V2 to V3 - google-maps

Question

I'm trying to convert Google Maps API V2 into V3 but I cannot get it to work, I been trying for 3 days now and it's not working :-(
If someone can please tell me how to do this correctly I would be very thankful...
V2 Code
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA4vJ90IKcF0qHxC2Cg9NjchT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQ-rtrvY-Stu0L_q-OypfOv3WnUfg"
type="text/javascript"></script>
<script type="text/javascript">
var geocoder, location1, location2, gDir, getCityName, getcITIESName, getDeliveryCityName, PickState, DeliveryState, SteState, SteStateB2, theAddress1, memeaddress1, memeaddress2;
function initialize() {
geocoder = new GClientGeocoder();
gDir = new GDirections();
GEvent.addListener(gDir, "load", function() {
var drivingDistanceMiles = (gDir.getDistance().meters / 1609.344).toFixed(0);//for 0 decial place
var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
//theAddress1 = location1.address
getCityName = location1.address.split(",")
memeaddress1 = getCityName[0] + ',' + getCityName[1];
getcITIESName = location2.address.split(",");
memeaddress2 = getcITIESName[0] + ',' + getcITIESName[1].substr(0,3);
SteState = document.getElementById('selFromState').options[document.getElementById('selFromState').options.selectedIndex].value;
SteStateB2 = document.getElementById('selToState').options[document.getElementById('selToState').options.selectedIndex].value;
if (document.getElementById("inputString").value + ', ' + SteState == memeaddress1)
{
}
else
{
doItagain=confirm('Cannot find the Pickup City!\n\nDid you mean: ' + location1.address + ' ?' + '\n\nPress OK to Change\nCancel to keep the City and State you entered!\n\n\n');
if(doItagain){
getCityName[1] = (getCityName[1]).replace(/^\s*|\s*$/g,'');
var showonlythefirst2ltrspickup = getCityName[1].substr(0,2)
document.getElementById("inputString").value = getCityName[0]
document.getElementById("selFromState").value = showonlythefirst2ltrspickup;
showLocation()
}
else
// Just end and exit function
window.alert('Please Note you must enter the miles manually!')
document.getElementById("txtMiles").value = "0";
//}
}
if (document.getElementById("inputString2").value + ', ' + SteStateB2 == memeaddress2)
{
document.getElementById("txtMiles").value = drivingDistanceMiles;
checkemptyB2();
}
else
{
doIt=confirm('Cannot find the Delivery City!\n\nDid you mean: ' + location2.address + ' ?' + '\n\nPress OK to Change\nCancel to keep the City and State you entered!\n\n\n');
if(doIt){
getcITIESName[1] = (getcITIESName[1]).replace(/^\s*|\s*$/g,'');
var showonlythefirst2ltrs = getcITIESName[1].substr(0,2)
document.getElementById("inputString2").value = getcITIESName[0]
document.getElementById("selToState").value = showonlythefirst2ltrs;
showLocation()
}
else
// Just end and exit function
window.alert('Please Note you must enter the miles manually!')
document.getElementById("txtMiles").value = "0";
}
});
}
function showLocation() {
checkemptyB2();
//geocoder = new GClientGeocoder();
//gDir = new GDirections();
//alert("here is the pickup address:" + document.getElementById("inputString2").value + ',' + document.getElementById("selToState").value)
geocoder.getLocations(document.getElementById("inputString").value + ',' + document.getElementById("selFromState").value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the pickup address");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.getLocations(document.getElementById("inputString2").value + ',' + document.getElementById("selToState").value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the delivery address");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address:
response.Placemark[0].address};
gDir.load('from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}
</script>
<script type="text/javascript">
function changedelivery() {
doIt=confirm('do you wish to proceed?');
if(doIt){
document.getElementById("inputString2").value = getcITIESName[0]
document.getElementById("selToState").value = SteStateB2
}
else{
// Just end and exit function
}
}
</script>
Here is the code that I tried:
<script type="text/javascript">
var geocoder,location1,location2,gDir,getCityName,getcITIESName,getDeliveryCityName,PickState,DeliveryState,SteState,SteStateB2,theAddress1,memeaddress1,memeaddress2;
function initialize() {
geocoder = new google.maps.Geocoder();
gDir = new google.maps.DirectionsService();
google.maps.Event.addListener(gDir, "load", function() {
var drivingDistanceMiles = (gDir.getDistance().meters / 1609.344).toFixed(0);//for 0 decial place
var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
getCityName = location1.address.split(",")
memeaddress1 = getCityName[0] + ',' + getCityName[1];
getcITIESName = location2.address.split(",");
memeaddress2 = getcITIESName[0] + ',' + getcITIESName[1].substr(0,3);
SteState = document.getElementById('selFromState').options[document.getElementById('selFromState').options.selectedIndex].value;
SteStateB2 = document.getElementById('selToState').options[document.getElementById('selToState').options.selectedIndex].value;
if (document.getElementById("inputString").value + ', ' + SteState == memeaddress1)
{
}
else
{
doItagain=confirm('Cannot find the Pickup City!\n\nDid you mean: ' + location1.address + ' ?' + '\n\nPress OK to Change\nCancel to keep the City and State you entered!\n\n\n');
if(doItagain){
getCityName[1] = (getCityName[1]).replace(/^\s*|\s*$/g,'');
var showonlythefirst2ltrspickup = getCityName[1].substr(0,2)
document.getElementById("inputString").value = getCityName[0]
document.getElementById("selFromState").value = showonlythefirst2ltrspickup;
showLocation()
}
else
// Just end and exit function
window.alert('Please Note you must enter the miles manually!')
document.getElementById("txtMiles").value = "0";
//}
}
if (document.getElementById("inputString2").value + ', ' + SteStateB2 == memeaddress2)
{
document.getElementById("txtMiles").value = drivingDistanceMiles;
checkemptyB2();
}
else
{
doIt=confirm('Cannot find the Delivery City!\n\nDid you mean: ' + location2.address + ' ?' + '\n\nPress OK to Change\nCancel to keep the City and State you entered!\n\n\n');
if(doIt){
getcITIESName[1] = (getcITIESName[1]).replace(/^\s*|\s*$/g,'');
var showonlythefirst2ltrs = getcITIESName[1].substr(0,2)
document.getElementById("inputString2").value = getcITIESName[0]
document.getElementById("selToState").value = showonlythefirst2ltrs;
showLocation()
}
else
// Just end and exit function
window.alert('Please Note you must enter the miles manually!')
document.getElementById("txtMiles").value = "0";
}
});
}
function showLocation() {
checkemptyB2();
geocoder.geocode(document.getElementById("inputString").value + ',' + document.getElementById("selFromState").value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the pickup address");
}
else
{
location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
geocoder.geocode(document.getElementById("inputString2").value + ',' + document.getElementById("selToState").value, function (response) {
if (!response || response.Status.code != 200)
{
alert("Sorry, we were unable to geocode the delivery address");
}
else
{
location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address:
response.Placemark[0].address};
gDir.load('from: ' + location1.address + ' to: ' + location2.address);
}
});
}
});
}
</script>
<script type="text/javascript">
function changedelivery() {
doIt=confirm('do you wish to proceed?');
if(doIt){
document.getElementById("inputString2").value = getcITIESName[0]
document.getElementById("selToState").value = SteStateB2
}
else
{
// Just end and exit function
}
}
</script>
Thanks again for any help with this!

Answer 1

Anything that starts with a "G" is a v2 class. You need to replace:
GClientGeocoder(); -> google.maps.Geocoder
GDirections(); -> google.maps.DirectionsService & google.maps.DirectionsRenderer
With their v3 equivalents. They are different, see the documentation for details.