[RESOLVED] google maps api wont initialize

**chris1990** · Apr 7th, 2011, 03:12 PM

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>

**chris1990** · Apr 7th, 2011, 03:23 PM

made a brew came back and realised my mistake.
i missed ()

Thread: [RESOLVED] google maps api wont initialize

Thread Tools

Display

[RESOLVED] google maps api wont initialize

Re: [RESOLVED] google maps api wont initialize

Posting Permissions