redesign

maurice0811 · 11 februari 2018

goede dag,

Ik gebruik een oud design om een taxi prijs berekening te kunnen maken (zie script hieronder).

Alles werkt in principe prima alleen wil ik het nu meer gaan gebruiken in responsive websites.

Helaas ben ik niet goed in froms en scripts. Ik gebruik gratis webtemplates en werk deze hier en daar een beetje bij en zo creëer ik

dan weer een webpagina.

Misschien is er iemand die mij kan/wil helpen om dit script beter/mooier te maken.

Ik wil er nog graag google maps in hebben met de route beschrijving, bij invullen van adres dat er suggesties bijkomen en dat het de inputboxes

mooier zijn dan nu (ronde hoeken).

Als iemand mij kan helpen om dit aan te passen?

Mijn dank hiervoor is enorm.

[sub]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
<title>ADL Taxi ritprijs bereken module</title> 
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="description" content="Bereken uw ritprijs"> 
<meta name="keywords" content="afstand, berekening, kosten, twee, plaatsen, postcode, tabel, distance, calculation, adltaxi"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQ IAAAAnuJR4LRoDzUr6UAzMKz5qhSST5iocg_mE_TutLwEIp8h7 JhN4RTp8mZ_GDWg-LQtzI9 Z-vrKrKZR5A" type="text/javascript"></script> 
<script type="text/javascript">
function initialize() 
{ 
if (GBrowserIsCompatible()) 
{ 
// new object WITHOUT parameters, because we do not want to show a written route AND a folder.... 
// http://code.google.com/apis/maps/doc...ml#GDirections 
gdir = new GDirections(); 
GEvent.addListener(gdir,"load", set_distance); 
} 
} 

function setDirections(fromAddress, toAddress, locale) 
{ 
// http://code.google.com/apis/maps/doc...ectionsOptions 
gdir.load("from: " + fromAddress + " to: " + toAddress, {locale: locale, travelMode:G_TRAVEL_MODE_DRIVING,avoidHighways: false} ); 
} 

function set_distance() 
{ 
// extra: foutafhandeling, kan handig zijn!!! 
handleErrors(); 
// document.getElementById("afstand").innerHTML = (gdir.getDistance().meters); 

var adl_afstand = gdir.getDistance().meters 

var prijsOnafgerond = (((adl_afstand/1000)-2)*2.2)+7.5 

prijs = Math.round(prijsOnafgerond + 0.5) 



prijsEuro = 'De geschatte ritprijs is: ? ' + prijs.toFixed(2) 

document.getElementById("ritprijs").innerHTML = prijsEuro; 
} 

// aantal kilometers - 2 *2.2+7.5= prijs 

function handleErrors() 
{ 
// http://code.google.com/apis/maps/doc...GGeoStatusCode 
if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS) 
alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code); 
else if (gdir.getStatus().code == G_GEO_SERVER_ERROR) 
alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code); 
else if (gdir.getStatus().code == G_GEO_MISSING_QUERY || gdir.getStatus().code == G_GEO_MISSING_ADDRESS) 
alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code); 
else if (gdir.getStatus().code == G_GEO_BAD_KEY) 
alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code); 
else if (gdir.getStatus().code == G_GEO_BAD_REQUEST) 
alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code); 
else if (gdir.getStatus().code == G_GEO_UNAVAILABLE_ADDRESS) 
alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code); 
else if (gdir.getStatus().code == G_GEO_UNKNOWN_DIRECTIONS) 
alert("The GDirections object could not compute directions between the points mentioned in the query. This is usually because there is no route available between the two points, or because we do not have data for routing in that region.\n Error code: " + gdir.getStatus().code); 
else if (gdir.getStatus().code == G_GEO_TOO_MANY_QUERIES) 
alert("The given key has gone over the requests limit in the 24 hour period or has submitted too many requests in too short a period of time.\n Error code: " + gdir.getStatus().code); 
} 

</script> 

<style type="text/css"> 
body { 
background-color: #5f5f5f; 
color: #fff; 
font-family: verdana, arial, helvetica, sans-serif; 
font-size: 11px; 
line-height: 18px; 

} 

#rittabel { 
border: 
} 

#ritprijs { 
font-weight: bold; 
font-size: 14px; 
color: #fff; 
} 

#euro { 
text-align: right; 
font-size: 13px; 
} 
#tableprijs { 
padding-top: 15px; 
} 
#rights { 
font-size: 9px; 
color: #ccc; 
} 
h1 { 
font-size: 16px; 
font-weight: bold; 
} 

</style> 

</head> 
<body onload="initialize()" onunload="GUnload()"> 
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, 'nl'); return false">
<table id="rittabel" cellspacing="5" cellpadding="5"> 
<tr> 
<td colspan="2"> 
<h1> ritprijs berekenen</h1> 
</td> 
</tr> 

<tr> 
<td colspan="2"> 
Via het onderstaande formulier kunt u berekenen wat de taxirit ongeveer gaat kosten. Deze prijs is gebaseerd op een luxe voertuig met 4 zitplaaten.Voor busvervoer gelden andere tarieven. 
</td> 
</tr> 
<tr> 
<td colspan="2" style="height: 20px;"> 
</td> 
</tr> 
<tr> 
<td>Voer uw postcode, adres of plaats van vertrek in: &nbsp;</td> 

<td valign="top"><input type="text" size="30" id="fromAddress" name="from" value="Leeuwendalersweg, Amsterdam" onblur="if(this.value=='') this.value='Leeuwendalersweg, Amsterdam';" onFocus="if(this.value=='bijv.: Leeuwendalersweg, Amsterdam') this.value='';"/></td> 
</tr> 
<tr> 
<td colspan="2" style="height: 20px;"> 
</td> 
</tr> 
<tr> 
<td>Voer uw postcode, adres of plaats van aankomst in:&nbsp;</td> 
<td valign="top"><input type="text" size="30" id="toAddress" name="to" value="bijv.: 1061 BH, 103" onblur="if(this.value=='') this.value='bijv.: Schiphol';" onFocus="if(this.value=='bijv.: 1061 BH, 103') this.value='';"/></td> 
</tr> 
<tr> 

<td>&nbsp;</td> 
<td><input tabindex="1" name="submit" type="submit" value="Bereken ritprijs!" /></td> 
</tr> 
<tr> 
<td colspan="2" style="height: 20px;"> 
<table border="0" width="100%" id="tableprijs"> 
<tr> 
<td><div id="ritprijs"></div></td> 
</tr> 
<tr> 

<td id="rights">Aan deze prijsschatting kunnen geen rechten worden ontleend.</td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</form>

leroy · 12 februari 2018

Ik heb een werkend dingetje gemaakt voor je, de code is wat veel en heb ik onderin toegevoegd als bijlage (app.html). Het werkt trouwens niet, zonder het te uploaden naar een FTP! Want ik heb wat code gebruikt dat niet werkt op je eigen computer.

Je moet in de Google API Console een nieuwe API sleutel aanvragen, en een aantal services toegang geven, nl:

Google Places API Web Service
Google Maps Directions API
Google Maps JavaScript API

In de code vindt je bijna bovenaan dit terug:

/**
* SETTINGS
*/
var api_key = "[HIER_JOUW_SLEUTEL]";

// verander hier jouw prijsberekening
function calculate_price(meters) {
	return (((meters/1000)-2)*2.2)+8;
}

Vervolgens voeg je de API sleutel toe in de code waar staat: [HIER_JOUW_SLEUTEL]

Onder die regel code vindt je ook een regel code waar je je prijsberekening zelf kunt aanpassen. Ik heb hem nu redelijkerwijs gekopieerd van je vorige script.

Maar het ziet er zo ongeveer uit.

Ingevuld:

Routebeschrijving geopend:

app.html

12 februari 2018 aangepast door leroy

maurice0811 · 13 februari 2018

Beste Leroy,

1000 maal dank hiervoor. Ziet er helemaal perfect uit. Zal er weinig tot niks aan hoeven te veranderen (misschien wat kleuren maar dat zal het dan ook zijn). Gebruik 000webhost om sites te testen voordat ze live gaan dus kon het daar mooi uitproberen (werkt perfect) Zag dat u bootstrap hebt gebruikt. Ben net een weekje bezig bij w3schools.com om dit goed onder de knie te krijgen. Kan ik dit straks mooi integreren.

Nogmaals mijn hartelijke dank voor uw hulp.

Maurice

leroy · 13 februari 2018

Ik heb inderdaad bootstrap gebruikt, dat is gewoon een heel goed CSS Framework om snel en volgens een internationaal geaccepteerde standaard een mooie webinterface te maken. In dit geval heb ik bootstrap 4 gebruikt, dit is een redelijk nieuwe versie en het kan zijn dat oude browsers hier niet meer overweg kunnen. Denk dan aan Internet Explorer 7 bijvoorbeeld.

De code die ik je op heb gestuurd verdient geen schoonheidsprijs, maar als je dit op 1 pagina wil plaatsen, dan zul je geen problemen ondervinden.

Laat maar een linkje achter, zodat ik eens kan kijken wat het geworden is!

Inloggen

redesign

Aanbevolen berichten

maurice0811

Link naar reactie

Delen op andere sites

leroy

Link naar reactie

Delen op andere sites

maurice0811

Link naar reactie

Delen op andere sites

leroy

Link naar reactie

Delen op andere sites

Welkom op PC Helpforum

Leden statistieken

OVER ONS

SITEMAP

Home

Info

Handleidingen & Tips

Activiteit

Belangrijke informatie