Price Calculator using google maps

Question

Hi i have this price calculator which calculates the price according to the distance. but i want an additional £11.50 charge to be added if the location is central london.

Calculator in use: http://unicornlogistics.com/price-calculator

and here is the js code:

//global map variable;
$(window).ready(function () {
initialize();
$('#calculateform .submitbtn').on({
    click: getPriceAndDistance
});    
});

function getPriceAndDistance(event) { 
event.preventDefault();

//validating Input
var state = 1;
var form = $('#calculateform');
var validateable = form.find('input');
validateable.each(function () {
    elem = $(this);
    $(elem).removeClass('invalid');
    if (elem.val().length < 2) {
        $(elem).addClass('invalid');
        state = 0;
    }
})

//doing the actual stuff
if(state == 1)
{
    var from = form.find('#from').val().trim().replace(/[^a-z0-9\s]/gi, '');
    var to = form.find('#to').val().trim().replace(/[^a-z0-9\s]/gi, '');
    var travelMode = form.find('#travelMode option:selected').val();
    var travelModeText = form.find('#travelMode option:selected').text();
    var price = Number(form.find('#travelMode option:selected').attr('price')).valueOf();

    var err = '';
    var locationFrom;
    var locationTo;


    $('#map-canvas').html('');                
    var mapOptions = {
        center: new google.maps.LatLng(55.378051, -3.43597299999999),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    $(form).find('p.msg').remove();
    $(form).find('p.loading').remove();
    loading = '<p class="loading">Loading Please Wait...<p>';
    $(form).append(loading);


    //initiate gecoder
    geocoder = new google.maps.Geocoder();

    if(geocoder)
    {


        geocoder.geocode({ 'address': from }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                locationFrom = results[0].geometry.location;
                if (locationFrom) 
                {
                    geocoder.geocode({ 'address': to }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {

                            locationTo = results[0].geometry.location;
                            if (locationTo) {
                                updateMap();
                            }
                            else {
                                err = '<p class="invalid msg">Destination location is not found.<p>';
                                $(form).append(err);                        
                            }

                        }
                        else {
                            $(form).find('.loading').remove();
                            err = '<p class="invalid msg">Geocoding failed due to following reasons ' + status + '.<p>';
                            $(form).append(err);
                        }
                    });

                }
                else{
                    err = '<p class="invalid msg">Starting location is not found.<p>';
                    $(form).append(err);                        
                }
            }
            else {
                //err = '<p class="invalid msg">Geocoding failed due to following reasons ' + status + '.<p>';
                err = '<p class="invalid msg">Sorry there seems to be some problem.<p>';
                errmsg = '<p class="invalid msg">Please check the location that you entered and try again.<p>';
                $(form).append(err);
                $(form).append(errmsg);
            }
        });




        function updateMap()
        {

            latlngCen = new google.maps.LatLng((locationFrom.lat()+locationTo.lat())/2,(locationFrom.lng()+locationTo.lng())/2);                
            map.panTo(latlngCen);
            map.setZoom(1);

            directionsService = new google.maps.DirectionsService();
            directionsDisplay = new google.maps.DirectionsRenderer();                
            directionsDisplay.setMap(map);

            var req = {
                origin:locationFrom,
                destination:locationTo
            }
            if (travelMode == 'driving')
            {
                req.travelMode = google.maps.DirectionsTravelMode.DRIVING;
            }
            else if (travelMode == 'transit')
            {
                req.travelMode = google.maps.DirectionsTravelMode.TRANSIT;
            }

            directionsService.route(req, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {                        
                    directionsDisplay.setDirections(response);
                    if (response.routes[0].legs[0].distance) {
                        console.log('here');
                        var d = response.routes[0].legs[0].distance.value / 1609;

                        var estTotal = d * price;

                        $(form).find('.loading').remove();
                        dText = "The distance between <strong>" + from + "</strong> and <strong>" + to + "</strong> is <strong>" + d.toFixed(2) + " miles</strong>";
                        pText = "The estimated price via <strong>" + travelModeText + "</strong> is <strong>&#163; " + estTotal.toFixed(2) + "</strong>";
                        $(form).prepend('<p class="valid msg">' + pText + '.</p>');
                        $(form).prepend('<p class="valid msg">' + dText + '.</p>');

                        $('html, body').animate({
                            scrollTop: 240
                        }, 200);

                    }
                    else {
                        $(form).find('.loading').remove();
                        err = '<p class="invalid msg">Sorry there seems to be some problem. You can contact us <a href="contact.html">here</a>.</p>'
                        $(form).append(err);
                    }
                }
            });



        }

    }
}


};

function initialize() {
// declaring map variable;
var mapOptions = {
  center: new google.maps.LatLng(55.378051, -3.43597299999999),
  zoom: 5,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map;
map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);
};

//google.maps.event.addDomListener(window, 'load', initialize);

Here is the html code:

<div id="map-holder">
<div class="container">
    <div id="map-canvas"></div>
</div>
</div>

<div id="main">
<div class="container">
    <div class="maintext">
        <h2>Instant Quote for Same Day deliveries Across UK mainland</h2>
    </div>
    <div id="calculateform" class="form">
        <p>Use the following form to calculate the estimated travel distance and price     for your courier.</p>
        <p class="instructions">You may search by Postcode,Street and/or City.
            <br/>For Example: 10 Downing Street.
        </p>
        <form>
            <p class="label">From</p>
            <input id="from" class="" type="text" name="from">

            <p class="label">To</p>
            <input id="to" class="" type="text" name="to">

            <p class="label">Mode of Transport</p>
            <select id="travelMode">
                <option value="driving" price=".80">Bike/Car</option>
                <option value="driving" price=".85">Small Van</option>
                <option value="driving" price=".95">Medium Van</option>
                <option value="driving" price="1.05">Large Van</option>
                <option value="driving" price="1.15">Extra Large Van</option>
            </select>

            <div class="clearfix"></div>
            <input class="submitbtn" type="submit" value="Submit" />
        </form>
    </div>
</div>
</div>

Answer 1

The geocoder will always return the same coordinates if you query London, so you could just mark that down and then compare the new coordinates from the query with the saved ones. If they match you increase the costs.