[RESOLVED] My code works in IE but not chrome, why?

[chris1990]

If you follow this link, my fare calculator works if your using IE, but not if your using chrome. Why does this happen ?, i think its something to do with the maps API not loading proper.

Also i have a problem with my if/else statements for set fares.

function CheckSetFare() {
var PickupTown = document.getElementById("input_3_city").value;//get town/city data from pickup
var DestinationTown = document.getElementById("input_8_city").value;//get town/city data from destination
var DestinationAddress = document.getElementById("j-destination").value;// get destination address data
var PickupAddress = document.getElementById("j-address").value;// get pickup address data
var InitFare = document.getElementById("initial-fare").value;
if(PickupTown == "Heywood" && DestinationAddress == "Manchester Airport, UK"){InitFare = 25};//Heywood-ManA-£25.
if(DestinationTown == "Heywood" && PickupAddress == "Manchester Airport, UK"){InitFare = 27};//ManA-Heywood-£27.
if(DestinationTown == "Heywood" && PickupAddress == "Manchester Piccadilly Station, UK"){InitFare = 17};//Picc-Heywood-£17.
if(PickupTown == "Heywood" && DestinationAddress == "Manchester Piccadilly Station, UK"){InitFare = 17};//Heywood-Picc-£17.
if(DestinationTown == "Middleton" && PickupAddress == "Manchester Airport, UK"){InitFare = 23};//ManA-Midd-£23.
if(PickupTown == "Middleton" && DestinationAddress == "Manchester Airport, UK"){InitFare = 25};//ManA-Midd-£25.
if(DestinationTown == "Castleton" && PickupAddress == "Manchester Airport, UK"){InitFare = 29};//ManA-Cast-£29.
if(PickupTown == "Castleton" && DestinationAddress == "Manchester Airport, UK"){InitFare = 27};//ManA-Cast-£27.
if(DestinationAddress == "Liverpool Airport, UK" && PickupAddress == "Manchester Airport, UK"){InitFare =50};//ManA-LivA-£50.
if(DestinationAddress == "Leeds Bradford Airport, UK" && PickupAddress == "Manchester Airport, UK"){InitFare =50};//ManA-LeBaA-£50.
if(DestinationAddress == "" && PickupAddress == ""){InitFare ="ERROR"};//error*/
InitFare =CurrencyFormatted(InitFare);
document.getElementById("initial-fare").value = InitFare;//replace quoted fare with new set fare for car.
document.getElementById("input_18").value = InitFare;//replace quoted fare with new set fare for car.
document.getElementById("QuotedFare").innerHTML = "£ " + InitFare;//dispaly fare for customer
}

Thanks Chris1990

[akhileshbc]

A small correction:

if(PickupTown == "Heywood" && DestinationAddress == "Manchester Airport, UK"){InitFare = 25};//Heywood-ManA-£25.

If the code is formatted, it would look like:

if(PickupTown == "Heywood" && DestinationAddress == "Manchester Airport, UK")
{
    InitFare = 25
};//Heywood-ManA-£25.

You see the mistake ?

The semi-colon should be after the "InitFare = 25" statement !

[SambaNeko]

The semi-colons shouldn't matter, but you should remove the HTML comment tags ("<--" and "//-->") from your .js file. These are appropriate when embedding Javascript in HTML with <script> tags, but should never be in a Javascript file.

[chris1990]

A small correction:

if(PickupTown == "Heywood" && DestinationAddress == "Manchester Airport, UK"){InitFare = 25};//Heywood-ManA-£25.

If the code is formatted, it would look like:

if(PickupTown == "Heywood" && DestinationAddress == "Manchester Airport, UK")
{
    InitFare = 25
};//Heywood-ManA-£25.

You see the mistake ?

The semi-colon should be after the "InitFare = 25" statement !

Thanks for your help, it seems to be working now.

The semi-colons shouldn't matter, but you should remove the HTML comment tags ("<--" and "//-->") from your .js file. These are appropriate when embedding Javascript in HTML with <script> tags, but should never be in a Javascript file.

Thanks, I've removed the html code from the js files. However my code still doesn't run in Chrome, it gets stuck at the timer where it uses google maps to get the distance. I've disabled the timer for now and the problem is the same.

Please could you take another look at my maps.js for me, because i can't figure out why it works in IE but not Chrome.

EDIT: I just tried it with firefox, and it doesn't work either. I downloaded firebug and cant find any errors. I've also made the map visible so that you can see the request function is working. Also when using the form, on the 'Vehicle' page you may have to press back and then press next again so the maps api can catch up, because i've disabled the timer.

Thanks Chris1990

[SambaNeko]

At the moment, when I try your page, it's working seemingly the same in IE9, Firefox and Chrome. It's hard to troubleshoot your script succinctly as there's a lot going on. This part may be problematic though:

	directionsService.route(request, function(result, status) {
	RouteStatus = status										  
    //if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(result);
			RouteDistance = result.routes[0].legs[0].distance.value;//returns value in meters
			RouteDistance = RouteDistance * 0.000621371192;//convert meters in to miles
			RouteDistance = Math.round(RouteDistance*10)/10;//returns 1 decimal place = 00.0
			RouteDuration = result.routes[0].legs[0].duration.value;//returns duration in seconds
			RouteDuration = RouteDuration /75;//60returns duration in minutes!!!!!!!!!!!estimated
			RouteDuration = Math.round(RouteDuration); //returns whole minute
    //}
  });
	document.getElementById("j-distance").value = "0";
	document.getElementById("j-distance").value = RouteDistance;
	document.getElementById("map-status").value = RouteStatus;
	document.getElementById("j-duration").value = RouteDuration + " Minutes (Estimate)";
	document.getElementById("QuotedDuration").innerHTML = RouteDuration + " Minutes (Estimate)";//dispaly fare for customer
	document.getElementById("QuotedDistance").innerHTML = RouteDistance + " Miles (Estimate)";//dispaly fare for customer
	//CheckMapStatus();
    CalcFare();// call function to calculate fare*/

directionsService.route() is (presumably) an asynchronous call, so the variables RouteDistance and RouteDuration are not set until the callback is executed, which is not immediate. So the value setting that follows directionsService.route() is probably not going to work correctly unless you move it within the callback:

	directionsService.route(request, function(result, status) {
	RouteStatus = status										  
    //if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(result);
			RouteDistance = result.routes[0].legs[0].distance.value;//returns value in meters
			RouteDistance = RouteDistance * 0.000621371192;//convert meters in to miles
			RouteDistance = Math.round(RouteDistance*10)/10;//returns 1 decimal place = 00.0
			RouteDuration = result.routes[0].legs[0].duration.value;//returns duration in seconds
			RouteDuration = RouteDuration /75;//60returns duration in minutes!!!!!!!!!!!estimated
			RouteDuration = Math.round(RouteDuration); //returns whole minute

			document.getElementById("j-distance").value = "0";
			document.getElementById("j-distance").value = RouteDistance;
			document.getElementById("map-status").value = RouteStatus;
			document.getElementById("j-duration").value = RouteDuration + " Minutes (Estimate)";
			document.getElementById("QuotedDuration").innerHTML = RouteDuration + " Minutes (Estimate)";//dispaly fare for customer
			document.getElementById("QuotedDistance").innerHTML = RouteDistance + " Miles (Estimate)";//dispaly fare for customer
			//CheckMapStatus();
				CalcFare();// call function to calculate fare*/
    //}
  });

As for the timer, I'm not sure what's up with that, but I probably wouldn't use something like that in the first place. Instead, when you do the Maps API call, I'd display a throbber and/or "loading" message, which would stay until the callback returned, then be removed and the data populated. That way, your "loading" message is directly tied to the thing that it's waiting on, rather than a separate timer which could have its own issues.

[chris1990]

I've been busy this week so hadn't had chance to write back.

It works fine now, thanks for your help.