Preisrechner mit Distanz Transitzeit und Nettopreis

Code:
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta type="description" content="Find the distance between two places on the map and the shortest route."/>
<title>Entfernung einfach online berechnen!</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=adsense&language=de"></script>
<script type="text/javascript">

        var location1;
        var location2;

        var address1;
        var address2;

        var latlng;
        var geocoder;
        var map;

        var distance;

        // finds the coordinates for the two locations and calls the showMap() function
        function initialize()
        {
                geocoder = new google.maps.Geocoder(); // creating a new geocode object

                // getting the two address values
                address1 = document.getElementById("address1").value;
                address2 = document.getElementById("address2").value;

                // finding out the coordinates
                if (geocoder)
                {
                        geocoder.geocode( { 'address': address1}, function(results, status)
                        {
                                if (status == google.maps.GeocoderStatus.OK)
                                {
                                        //location of first address (latitude + longitude)
                                        location1 = results[0].geometry.location;
                                } else
                                {
                                        alert("Geocode was not successful for the following reason: " + status);
                                }
                        });
                        geocoder.geocode( { 'address': address2}, function(results, status)
                        {
                                if (status == google.maps.GeocoderStatus.OK)
                                {
                                        //location of second address (latitude + longitude)
                                        location2 = results[0].geometry.location;
                                        // calling the showMap() function to create and show the map
                                        showMap();
                                } else
                                {
                                        alert("Geocode was not successful for the following reason: " + status);
                                }
                        });
                }
        }

        // creates and shows the map
        function showMap()
        {
                // center of the map (compute the mean value between the two locations)
                latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

                // set map options
                        // set zoom level
                        // set center
                        // map type
                var mapOptions =
                {
                        zoom: 1,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // create a new map object
                        // set the div id where it will be shown
                        // set the map options
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

                // show route between the points
                directionsService = new google.maps.DirectionsService();
                directionsDisplay = new google.maps.DirectionsRenderer(
                {
                        suppressMarkers: true,
                        suppressInfoWindows: true
                });
                directionsDisplay.setMap(map);
                var request = {
                        origin:location1,
                        destination:location2,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status)
                {
                        if (status == google.maps.DirectionsStatus.OK)
                        {
                                directionsDisplay.setDirections(response);
                                distance = "Für die angezeigte Strassenverbindung beträgt die Distanz zwischen den 2 Orten genau: "+response.routes[0].legs[0].distance.text;
                                distance += "<br/>Durchschnittliche Fahrzeit für die Strecke: "+response.routes[0].legs[0].duration.text;
                                document.getElementById("distance_road").innerHTML = distance;
                        }
                });



                // create the markers for the two locations
                var marker1 = new google.maps.Marker({
                        map: map,
                        position: location1,
                        title: "First location"
                });
                var marker2 = new google.maps.Marker({
                        map: map,
                        position: location2,
                        title: "Second location"
                });

                // create the text to be shown in the infowindows
                var text1 = '<div id="content">'+
                                '<h1 id="firstHeading">First location</h1>'+
                                '<div id="bodyContent">'+
                                '<p>Coordinates: '+location1+'</p>'+
                                '<p>Address: '+address1+'</p>'+
                                '</div>'+
                                '</div>';

                var text2 = '<div id="content">'+
                        '<h1 id="firstHeading">Second location</h1>'+
                        '<div id="bodyContent">'+
                        '<p>Coordinates: '+location2+'</p>'+
                        '<p>Address: '+address2+'</p>'+
                        '</div>'+
                        '</div>';

                // create info boxes for the two markers
                var infowindow1 = new google.maps.InfoWindow({
                        content: text1
                });
                var infowindow2 = new google.maps.InfoWindow({
                        content: text2
                });

                // add action events so the info windows will be shown when the marker is clicked
                google.maps.event.addListener(marker1, 'click', function() {
                        infowindow1.open(map,marker1);
                });
                google.maps.event.addListener(marker2, 'click', function() {
                        infowindow2.open(map,marker1);
                });

                // compute distance between the two points
                var R = 6371;
                var dLat = toRad(location2.lat()-location1.lat());
                var dLon = toRad(location2.lng()-location1.lng());

                var dLat1 = toRad(location1.lat());
                var dLat2 = toRad(location2.lat());

                var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                                Math.cos(dLat1) * Math.cos(dLat1) *
                                Math.sin(dLon/2) * Math.sin(dLon/2);
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
                var d = R * c;

              
        }

        function toRad(deg)
        {
                return deg * Math.PI/180;
        }
</script>

</head>

<body bgcolor="#eeeeee">
        <div id="form" style="width:100%; height:20%">
                <table align="center" valign="center">
                        <tr>
                                <td colspan="7" align="center"><b>Ermittle die Distanz zwischen 2 Orten</b></td>
                        </tr>
                        <tr>
                                <td colspan="7">&nbsp;</td>
                        </tr>
                        <tr>
                                <td>Start eingeben:</td>
                                <td>&nbsp;</td>
                                <td><input type="text" name="address1" id="address1" size="50"/></td>
                        </tr>
                        <tr>
                        <td>Ziel eingeben:</td>
                                <td>&nbsp;</td>
                                <td><input type="text" name="address2" id="address2" size="50"/></td>
                        </tr>
                        <tr>
                                <td colspan="7">&nbsp;</td>
                        </tr>
                        <tr>
                                <td colspan="7" align="center"><input type="button" value="Anzeigen" onclick="initialize();"/></td>
                        </tr>
                </table>
        </div>
        <center><div style="width:100%; height:10%" id="distance_direct"></div></center>
        <center><div style="width:100%; height:10%" id="distance_road"></div></center>

        <center><div id="map_canvas" style="width:70%; height:54%"></div></center>
</body>
</html>
 
Ich würde das nach Möglichkeit mit PHP machen.

Warum?

Damit dir nicht jeder in die Karten schauen kann. ;)
 
wie bekomme ich jetzt das mit den Preis hin, wenn ich Start und Ziel eingebe das es auch automatisch des preis ermittelt?
 
Du brauchst die Variable mit der Entfernung. Dann prüfst Du, ob diese unter oder über 150 Km beträgt usw.

Q&D
PHP:
if($entfernung <= 150)
{ 
$preis = 110;
}
else
{ 
$dif = ($entfernung - 150) * 0,75;
$preis = $dif + 110 
}
 
ich habe es mal so versucht
Code:
<html>
<head>
<title>Rechner</title>
<meta type="description" content="Distanz und Preis ermitteln."/>



<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">

    var address1;
    var address2;

    var latlng;
    var geocoder;
    var map;

    var distance;
    var preisprokm=0.75;


    function initialize()
    {
        geocoder = new google.maps.Geocoder();
        // Adressen
        address1 = document.getElementById("address1").value;
        address2 = document.getElementById("address2").value;



        // Koordinaten finden
        if (geocoder)
        {
            geocoder.geocode( { 'address': address1}, function(results, status)
            {
                if (status == google.maps.GeocoderStatus.OK)
                {
                    location1 = results[0].geometry.location;
                } else
                {
                    alert("Es ist ein Fehler aufgetreten. Bitte erneut versuchen: " + status);
                }
            });
            geocoder.geocode( { 'address': address2}, function(results, status)
            {
                if (status == google.maps.GeocoderStatus.OK)
                {
                 
                    location2 = results[0].geometry.location;
                   
                    showMap();
                } else
                {
                    alert("Es ist ein Fehler aufgetreten. Bitte erneut versuchen: " + status);
                }
            });
        }
    }

    // Erstellt Karte
    function showMap()
    {
      
        latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

       
        var mapOptions =
        {
            zoom: 1,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        // Route
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(
        {
            suppressMarkers: true,
            suppressInfoWindows: true
        });
        directionsDisplay.setMap(map);
        var request = {
            origin:location1,
            destination:location2,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status)
        {
            if (status == google.maps.DirectionsStatus.OK)
            {
                directionsDisplay.setDirections(response);
                distance = "Entfernung: "+response.routes[0].legs[0].distance.text;
        distance += "</br>Preis pro km: " + preisprokm + " €";
        distance += "</br>Ungef&auml;hrer Preis: " + ((Math.round((response.routes[0].legs[0].distance.value)/1000)*preisprokm)+0.0) + " €";
        distance += "</br>Ungef&auml;hre Zeit: "+response.routes[0].legs[0].duration.text;

        document.getElementById("distance_road").innerHTML = distance;
            }
        });


        // Marker 
        var marker1 = new google.maps.Marker({
            map: map,
            position: location1,
            title: "Start"
        });
        var marker2 = new google.maps.Marker({
            map: map,
            position: location2,
            title: "Ziel"
        });

     
  

        // Entfernung berechnen
        var R = 6371;
        var dLat = toRad(location2.lat()-location1.lat());
        var dLon = toRad(location2.lng()-location1.lng());

        var dLat1 = toRad(location1.lat());
        var dLat2 = toRad(location2.lat());

        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                Math.cos(dLat1) * Math.cos(dLat1) *
                Math.sin(dLon/2) * Math.sin(dLon/2);
    }

    function toRad(deg)
    {
        return deg * Math.PI/180;
    }
</script>

</head>

<body bgcolor="#eeeeee">
    <div id="form" style="width:100%; height:20%">
        <table align="center" valign="center">
            <tr>
                <td colspan="7" align="center"><b>Entfernung und Preis berechnen</b></td>
            </tr>
            <tr>
                <td colspan="7">&nbsp;</td>
            </tr>
            <tr>   
                <td>Start:</td>
                <td>&nbsp;</td>
                <td><input type="text" name="address1" id="address1" size="50"/></td>
                <td>&nbsp;</td>
                <td>Ziel:</td>
                <td>&nbsp;</td>
                <td><input type="text" name="address2" id="address2" size="50"/></td>
            </tr>
            <tr>
                <td colspan="7">&nbsp;</td>
            </tr>
            <tr>
                <td colspan="7" align="center"><input type="button" value="Berechnen" onClick="initialize();"/></td>
            </tr>
        </table>
    </div>
    <center><div style="width:100%; height:10%" id="distance_road"></div></center>
   
    <center><div id="map_canvas" style="width:70%; height:54%"></div></center>
</body>
</html>
 
hallo kann jemand vieleicht mir sagen wo ich diese werte einfügen muss

Code:
if($entfernung <= 150)
{
$preis = 110;
}
else
{
$dif = ($entfernung - 150) * 0,75;
$preis = $dif + 110
}

das ist mein js

Code:
<hr />
<p> </p>
<p>Geben Sie hier den Start- und Zielort (Straße, Hausnummer, PLZ, Ort) ein. Danach klicken Sie auf die entsprechende Fahrzeugkategorie und abschließend auf Berechnen. Dann erscheint rechts daneben die Entfernung, die Fahrzeit und der Nettopreis.</p>
<p> </p>
<table class="mceItemTable" style="cursor: default; border: 1px dashed #bbbbbb;" border="0">
<tbody>
<tr>
                     </strong></p>
</td>
</tr>

</tbody>
</table>
<p> </p>
<p><em>        <div class="moduletable">
                            <h3>Preisrechner</h3>

<style type="text/css">
    #priceCalculator {
        width: 660px;
        height: 700px;
    }
    .errorMessage {
        font-size: 10px;
        font-style: italic;
        color: #720000;
    }
    .addressRow {
        margin-bottom: 2px;
    }
    .addressLabel {
        float: left;
        font-size: 12px;
        font-weight: bold;
        width: 200px;
        height: 24px;
        padding-top: 6px;
    }
    .addressInput {
        float: left;
        font-size: 14px;
        width: 440px;
        height: 24px;
        padding-left: 8px;
        padding-top: 5px;
    }
    .vehicleButtonRow {
        margin-top: 15px;
    }
    .vehicleButtonLabel {
        float: left;
        font-size: 12px;
        font-weight: bold;
        width: 200px;
        height: 41px;
        padding-top: 5px;
    }
    .vehicleButtonSpacer {
        float: left;
        width: 10px;
        height: 28px;
    }
    .resultRow {
        margin-top: 0px;
    }
    .priceButton {
        float: left;
        width: 148px;
        height: 46px;
    }
    .waitingAnimation {
        float: left;
        width: 52px;
        height: 46px;
    }
    .resultBox {
        float: left;
        width: 148px;
        height: 46px;
        font-size: 20px;
        color: #666666;
        font-weight: bold;
        text-align: center;
        line-height: 46px;
    }
    .resultBoxSpacer {
        float: left;
        width: 4px;
        height: 46px;
    }
    .googleCopyright {
        float: right;
        margin-top: 30px;
        margin-right: 6px;
        font-size: 8px;
        color: Gray;
    }
    .vehicleButton {
        -moz-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
        -webkit-box-shadow:inset 0px 1px 0px 0px #d9fbbe;
        box-shadow:inset 0px 1px 0px 0px #d9fbbe;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #b8e356), color-stop(1, #a5cc52));
        background:-moz-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
        background:-webkit-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
        background:-o-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
        background:-ms-linear-gradient(top, #b8e356 5%, #a5cc52 100%);
        background:linear-gradient(to bottom, #b8e356 5%, #a5cc52 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8e356', endColorstr='#a5cc52',GradientType=0);
        background-color:#b8e356;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #83c41a;
        display:inline-block;
        cursor:pointer;
        color:#ffffff;
        font-family:Arial;
        font-size:15px;
        font-weight:bold;
        text-decoration:none;
        text-shadow:0px 1px 0px #86ae47;
        text-align:center;
        vertical-align:middle;
        width: 94px;
        padding: 6px 24px;
        float: left;
        line-height: 28px;
    }
    .vehicleButton:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a5cc52), color-stop(1, #b8e356));
        background:-moz-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
        background:-webkit-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
        background:-o-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
        background:-ms-linear-gradient(top, #a5cc52 5%, #b8e356 100%);
        background:linear-gradient(to bottom, #a5cc52 5%, #b8e356 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a5cc52', endColorstr='#b8e356',GradientType=0);
        background-color:#a5cc52;
    }
    .vehicleButton:active {
        position:relative;
        top:1px;
    }

</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var zipHome = "Giesenkirchn, 39387 mg";

var distCount = 3;
var distCalcCount = 0;
var dist = new Array(distCount);
var dura = new Array(distCount);

var HOME_TO_START = 0;
var START_TO_END = 1;
var END_TO_HOME = 2;

var Veh1 = "Veh1";
var Veh2 = "Veh2";
var Veh3 = "Veh3";

var baseP = 0;
var baseKP = 0;
var transportKP = 0;
var timeFactor = 1;

var addressError = false;

window.onload = addVehicleNamesToButtons;

function getPrice(vehicleType) {
    showWaitingAnimation();
    clearResults();

    var zipStart = document.getElementById('zipStartInput').value;
    var zipEnd = document.getElementById('zipEndInput').value;

    setRates(vehicleType);

    distCalcCount = 0;
    addressError = false;
    calcDistanceAndPrice(HOME_TO_START, zipHome, zipStart);
    calcDistanceAndPrice(START_TO_END, zipStart, zipEnd);
    calcDistanceAndPrice(END_TO_HOME, zipEnd, zipHome);

    return true;
}

function clearResults() {
    document.getElementById('addressError').innerHTML = '';
    document.getElementById('vehicleError').innerHTML = '';
    document.getElementById('distance').innerHTML = '';
    document.getElementById('duration').innerHTML = '';
    document.getElementById('price').innerHTML = '';
    document.getElementById('googleCopyright').innerHTML = '';
}

function showWaitingAnimation() {
    var animation = document.getElementById("waitingAnimation");
    animation.innerHTML = '<img src="http://images/ajax-loader.gif">';
    animation.style.display = '';
}

function hideWaitingAnimation() {
    document.getElementById('waitingAnimation').style.display = "none";
}

function setRates(vehicle) {
    if (vehicle == Veh1) {
        baseP = 00;
        baseKP = 0.00;
        transportKP = 0.55;
        timeFactor = 1.1;
    }
    if (vehicle == Veh2) {
        baseP = 00;
        baseKP = 0.0;
        transportKP = 0.65;
        timeFactor = 1.2;
    }
    if (vehicle == Veh3) {
        baseP = 00;
        baseKP = 0.00;
        transportKP = 0.75;
        timeFactor = 1.4;
    }
}

function calcDistanceAndPrice(i, zipStart, zipEnd) {
    var request = {
        origin: zipStart,
        destination: zipEnd,
        region: "DE",
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC,
        provideRouteAlternatives: false
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            dist[i] = result.routes[0].legs[0].distance.value / 1000;
            dura[i] = result.routes[0].legs[0].duration.value * timeFactor;
            if (i == START_TO_END) {
                document.getElementById('zipStartInput').value = result.routes[0].legs[0].start_address;
                document.getElementById('zipEndInput').value = result.routes[0].legs[0].end_address;
            }
        } else {
            addressError = true;
        }

        if (++distCalcCount == distCount) {
            if (addressError) {
                document.getElementById('addressError').innerHTML = 'Preisberechnung f&uuml;r diesen Start- und Zielort ist nicht m&ouml;glich...';
                document.getElementById('distance').innerHTML = 'k. A.';
                document.getElementById('duration').innerHTML = 'k. A.';
                document.getElementById('price').innerHTML = 'k. A.';
            } else {
                document.getElementById('price').innerHTML = Math.round(doPriceCalculation()) + " &euro;";
                document.getElementById('distance').innerHTML = Math.round(dist[START_TO_END]) + " km";
                var hours = Math.floor(dura[START_TO_END] / 3600);
                var minutes = Math.round(((dura[START_TO_END] / 3600) - hours) * 60);
                document.getElementById('duration').innerHTML = hours + " Std. " + minutes + " Min.";
                document.getElementById('googleCopyright').innerHTML = "Entfernungsberechnung basierend auf: " + result.routes[0].copyrights;
            }
            hideWaitingAnimation();
        }
    });
}

function doPriceCalculation() {
    return baseP + ((dist[HOME_TO_START] + dist[END_TO_HOME]) * baseKP) + (dist[START_TO_END] * transportKP);
}

function addVehicleNamesToButtons() {
    document.getElementById('btnVeh1').innerHTML = "PKW";
    document.getElementById('btnVeh2').innerHTML = "CADDY";
    document.getElementById('btnVeh3').innerHTML = "SPRINTER";
}

</script>

<div id="priceCalculator">
    <div style="margin-bottom:8px">
        <div class="errorMessage" id="addressError"> </div>
        <div class="errorMessage" id="vehicleError"> </div>
    </div>

    <div class="addressRow">
        <div class="addressLabel">Von:</div>
        <input class="addressInput" type="text" name="zipStartInput" id="zipStartInput" />
        <div style="clear:left;"></div>
    </div>

    <div class="addressRow">
        <div class="addressLabel">Nach:</div>
        <input class="addressInput" type="text" name="zipEndInput" id="zipEndInput" />
        <div style="clear:left;"></div>
    </div>

    <div class="vehicleButtonRow">
        <div class="vehicleButtonLabel">Berechnen:</div>
        <div class="vehicleButton" id="btnVeh1" onclick="getPrice('Veh1')"></div>
        <div class="vehicleButtonSpacer"></div>
        <div class="vehicleButton" id="btnVeh2" onclick="getPrice('Veh2')"></div>
        <div class="vehicleButtonSpacer"></div>
        <div class="vehicleButton" id="btnVeh3" onclick="getPrice('Veh3')"></div>
        <input type="hidden" name="vehicle" id="vehicle" value="" />
        <div style="clear:left;margin-top:0px"></div>
    </div>

    <div class="resultRow">
        <div class="priceButton" id="btnPrice"> </div>
        <div class="waitingAnimation">
            <div id="waitingAnimation" style="display:none;margin-left:10px;margin-top:7px"></div>
        </div>
        <div class="resultBox" id="distance"> </div>
        <div class="resultBoxSpacer"></div>
        <div class="resultBox" id="duration"> </div>
        <div class="resultBoxSpacer"></div>
        <div class="resultBox" id="price"> </div>
        <div class="googleCopyright" id="googleCopyright"> </div>
        <div style="clear:both;"></div>
    </div>
</div>        </div>
    </em></p>
<div> </div>
<p> </p>
 
Zurück