<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService(); //Error
var map;
var oldDirections = [];
var currentDirections = null;
<?
require("db.php");
$objConnect=mysql_connect ($hostname, $username, $password) or die("Error Connect to Database");
@mysql_query("SET character_set_results=UTF8");
@mysql_query("SET character_set_client='UTF8'");
@mysql_query("SET character_set_connection='UTF8'");
@mysql_query("collation_connection = utf8_unicode_ci");
@mysql_query("collation_database = utf8_unicode_ci");
@mysql_query("collation_server = utf8_unicode_ci");
$objDB = mysql_select_db("s52530315");
//Error
$sql = "select * from place where name_place ='".$_GET['end']."' limit 0 , 1;";
$query = mysql_query($sql);
while($row = mysql_fetch_assoc($query)){
$MLat = $row["latitude"];
$MLng = $row["longitude"];
}
$sqlstart = "select * from place where name_place ='".$_GET['start']."' limit 0 , 1;";
$querystart = mysql_query($sqlstart);
while($rowstart = mysql_fetch_assoc($querystart)){
$MLatstart = $rowstart["latitude"];
$MLngstart = $rowstart["longitude"];
}
?>
var start = new google.maps.LatLng(<?=$MLatstart?>,<?=$MLngstart?>);
var end = new google.maps.LatLng(<?=$MLat?>,<?=$MLng?>);
if(start==""){
start = new google.maps.LatLng(13.754059,100.493317);
}
function initialize() {
var myOptions = {
zoom: 12,
center:start,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay = new google.maps.DirectionsRenderer({
'map': map,
'preserveViewport': true,
'draggable': true
});
directionsDisplay.setPanel(document.getElementById("directions_panel"));
google.maps.event.addListener(directionsDisplay, 'directions_changed',
function() {
if (currentDirections) {
oldDirections.push(currentDirections);
}
currentDirections = directionsDisplay.getDirections();
});
calcRoute("DRIVING");
}
function calcRoute(mode) {
if(mode=='WALKING')
mode = google.maps.DirectionsTravelMode.WALKING
else
mode = google.maps.DirectionsTravelMode.DRIVING
var request = {
origin:start,
destination:end,
travelMode: mode
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="float:left;width:70%;height:100%"></div>
<div style="float:right;width:30%;height:100%;overflow:auto">
<div>
<h2>การเดินทาง</h2>
<input type="button" value="รถยนต์" id="ddrive" onClick="calcRoute('DRIVING')" />
<input type="button" value="เดินเท้า" id="dwalk" onClick="calcRoute('WALKING')"/>
</div>
<div id="directions_panel" style="width:100%"></div>
</div>
</body>
</html>
