[RESOLVED] google maps api wont initialize
I have made a working fare calculator for the taxi company i work at, all i have done is copy the script i made from the page i created it on, to this new page which i have improved the layout and styled with css. The problem is that the map wont initialize for some reason, and i can't figure out why.
my basic design that i made is here
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Car 2000 Heywood - Online Bookings</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<link href="layout1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var Gdistance;
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var Office = new google.maps.LatLng(53.593338, -2.222371);//41.850033:-87.6500523
var myOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: Office
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
// if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
Gdistance = response.routes[0].legs[0].distance.value;
Gdistance = Gdistance * 0.000621371192;
var roundedNumber = roundNumber(Gdistance,2);
document.getElementById('txtDistance').value = roundedNumber;
});
}
// Round Up Number to 1/2 Descimals
function roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}
// Calculate Fare
function calcFare() {
// variables
var fareResult
var distance = document.getElementById('txtDistance').value;
var firstMile = 2.20;
var pricepMile = 1.80;
// calculator for Car
//exc 1st mile and calc rest of miles by PPM
fareResult = (distance - 1) * pricepMile
//inc first mile
fareResult = fareResult + firstMile
// show fare result
var roundedNumber = roundNumber(fareResult,2);
if (roundedNumber < 1.675) {roundedNumber = "1.70"};
document.getElementById('txtFare').value = roundedNumber;
calcType();
}
function calcType() {
var VehType = document.getElementById("sVehicle").value;
var EstFare = document.getElementById("txtFare").value;
var FinalFare = ""
if (VehType == "car")
{FinalFare = EstFare}
if (VehType == "estate")
{FinalFare = EstFare * 1.25 };
if (VehType == "bus")
{FinalFare = EstFare * 1.50};
if (VehType == "exec")
{FinalFare = EstFare * 1.75};
var roundedNumber = roundNumber(FinalFare,2);
document.getElementById("txtTypeFare").value = roundedNumber
}
</script>
</head>
<body onLoad="initialize">
<div id="topmargin">CAR 2000 ONLINE BOOKINGS</div>
<div align="center" id="topimghdr">
<img style="margin-right:75px;" src="logo_h.gif">
<img style="margin-left:75px;" src="right_h.gif">
</div>
<div id="topmenu">GET A QUOTE: BOOK NOW : REGISTER : LOG IN</div>
<div id="container">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="350px">
<div id="content-left">
<div id="side-container">
<ul>
<li class="dir-label">Pickup Location:</li>
<li><input id="start" type="textbox" value="Mission Street, Heywood">
<br clear="both"/>
</li>
<li><br ></li>
<li class="dir-label">Destination:</li>
<li><input id="end" type="textbox" value="The Rock, Bury"></li>
<li class="dir-label">Distance</li>
<li><input id="txtDistance" type="textbox" value="">
<input type="button" value="calcroute" onClick="calcRoute()"></li>
<li class="dir-label">Fare</li>
<li><input id="txtFare" type="textbox" value="">
<input type="button" value="fare" onClick="calcFare()"></li>
<li class="dir-label">Vehicle</li>
<li><select id="sVehicle" onChange="calcType()">
<option value="car">Car</option>
<option value="estate">Estate</option>
<option value="bus">Mini-Bus</option>
<option value="exec">Executive</option>
</select>
<label>
<input type="radio" name="radio" id="OptnCar" value="OptnCar" >
</label>
</li>
<li></li>
<li>
<input id="txtTypeFare" type="textbox" value="">
</li>
</ul>
</div>
</div>
</td>
<td>
<div id="map_container">
<div id="map_canvas"> </div>
</div>
</td>
</tr>
</table>
</div>
<div id="footer"> COPYRIGHT © 2011 CAR 2000 HEYWOOD, ALL RIGHTS RESERVED.</div>
</body>
</html>
Re: [RESOLVED] google maps api wont initialize
made a brew came back and realised my mistake.
i missed ()
