Okay I have added some basic driving direction capability. I havent yet added any new database fields to support this but I plan on adding a few more to make the whole thing configurable from the admin area.
For the time being here's what I have. I am still working some bugs out, and I may wind up changing things around but I'll post the code here now if anyone wants to play with it.
Basically, when you first visit the page you get the original easymap component but I added a form on the bottom asking for a start address. When the address is submitted you then get taken to a page showing turn by turn directions and a map with a polyline drawn along the route, as well as zoom/view controls.
<?php
/*
$Id: easymap.php,v 1.1 2005/12/31 by Jack_mcs
Turn by Turn Driving directions functionality added by Goanna
osCommerce, Open Source E-Commerce Solutions
[url=http://www.oscommerce.com]http://www.oscommerce.com[/url]
Copyright © 2003 osCommerce
Released under the GNU General Public License
*/
require('includes/application_top.php');
require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_EASYMAP);
$breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_EASYMAP));
$action = (isset($_POST['action']) ? $_POST['action'] : '');
$line = array();
$line = explode(",", EM_LINES_COORD);
$longitude = EM_LONGITUDE;
$lattitude = EM_LATTITUDE;
$to = "123 main street washington dc"; //Destination address goes here formatted Street, City, State, Zip (with or without commas).
$from = $_POST['fromAddress'];
?>
<!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" <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://maps.google.com/maps?file=api&v=2&key=abcd123456" type="text/javascript"></script>
<?php if ($getdirections == 'true'): ?>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
body {
font-family: Verdana, Arial, sans serif;
font-size: 11px;
margin: 2px;
}
table.directions th {
background-color:#EEEEEE;
}
img {
color: #000000;
}
</style>
<script type="text/javascript">
//<![CDATA[
var map;
var gdir;
var geocoder = null;
var addressMarker;
var trafficInfo = new GTrafficOverlay();
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
gdir = new GDirections(map, document.getElementById("directions"));
GEvent.addListener(gdir, "load", onGDirectionsLoad);
GEvent.addListener(gdir, "error", handleErrors);
setDirections("<?php echo $from; ?>", "<?php echo $to; ?>", "en_US");
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
//map.addOverlay(trafficInfo); //Need to add a button to toggle this on/off before using.
}
}
function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": locale });
}
function handleErrors(){
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)
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_UNAVAILABLE_ADDRESS) <--- Doc bug... this is either not defined, or Doc is wrong
// 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_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 alert("An unknown error occurred.");
}
function onGDirectionsLoad(){
// Use this function to access information about the latest load()
// results.
// e.g.
// document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
// and yada yada yada...
}
//]]>
</script>
<?php else: ?>
<!-- BOC googlemap //-->
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(<?php echo $longitude; ?>, <?php echo $lattitude; ?>), 14);
<?php if (EM_SHOW_MAP_SIZE == 'true') {
if (EM_SHOW_MAP_CONTROLS == 'complete') { ?>
map.addControl(new GLargeMapControl());
<?php } ?>
<?php if (EM_SHOW_MAP_CONTROLS == 'compact') { ?>
map.addControl(new GSmallMapControl());
<?php } } ?>
<?php if (EM_SHOW_MAP_VIEW == 'true') { ?>
map.addControl(new GMapTypeControl());
<?php } ?>
// map.addControl(new GOverviewMapControl());
<?php if (EM_SHOW_MAP_VIEW == 'true') { ?>
map.addControl(new GScaleControl());
<?php } ?>
<?php if (EM_SHOW_MAP_COORDINATES == 'true') { ?>
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
<?php } ?>
// Our info window content
var infoTabs = [
new GInfoWindowTab("<?php echo EM_LOCATION_BUBBLE_TITLE; ?>", "<?php echo EM_LOCATION_BUBBLE_CONTENT; ?>")
<?php if (EM_SHOW_MAP_TAB == 'true') { ?>,
new GInfoWindowTab("<?php echo EM_LOCATION_TAB_TITLE; ?>", "<?php echo EM_LOCATION_TAB_CONTENT; ?>")
<?php } ?>
];
<?php if (EM_SHOW_MAP_MARKER == 'true') { ?>
// Place a marker in the center of the map and open the info window
// automatically
var marker = new GMarker(map.getCenter());
map.addOverlay(marker);
<?php if (EM_LOCATION_MAP_BUBBLE == 'true') { ?>
marker.openInfoWindowTabsHtml(infoTabs);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs);
});
<?php } } ?>
<?php if (EM_SHOW_MAP_LINES == 'true') { ?>
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
// Add a polyline with five random points. Sort the points by
// longitude so that the line does not intersect itself.
var points = [];
points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[0]; ?>,
southWest.lng() + lngSpan * <?php echo $line[1]; ?>));
points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[2]; ?>,
southWest.lng() + lngSpan * <?php echo $line[3]; ?>));
points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[4]; ?>,
southWest.lng() + lngSpan * <?php echo $line[5]; ?>));
points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[6]; ?>,
southWest.lng() + lngSpan * <?php echo $line[7]; ?>));
points.push(new GLatLng(southWest.lat() + latSpan * <?php echo $line[8]; ?>,
southWest.lng() + lngSpan * <?php echo $line[9]; ?>));
points.sort(function(p1, p2) {
return p1.lng() - p2.lng();
});
map.addOverlay(new GPolyline(points));
<?php } ?>
}
}
//]]>
</script>
<?php endif; ?>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" onload="load()" onunload="GUnload()">
<!-- header //-->
<?php require(DIR_WS_INCLUDES . 'header.php'); ?>
<!-- header_eof //-->
<!-- body //-->
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="columnLeft" width="<?php echo COLUMN_LEFT_WIDTH; ?>" valign="top"><table border="0" width="<?php echo COLUMN_LEFT_WIDTH; ?>" cellspacing="0" cellpadding="0">
<!-- left_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>
<!-- left_navigation_eof //-->
</table></td><td background="images/links/shadow_column_left.gif"> </td>
<td><?php echo tep_draw_separator('pixel_trans.gif', COLUMN_SPACER_WIDTH, '1'); ?></td>
<!-- body_text //-->
<?php if ($getdirections == 'true'): ?>
<td width="100%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
<td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_specials.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
</tr>
</table></td>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
</tr>
<tr>
<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td class="main">
<div id="map" style="width: 650px; height: 400px"></div>
<br />
<span>Formatted Directions</span>
<div id="directions" style="width: 650px"></div></td>
</tr>
</table></td>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
</tr>
<tr>
<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
<tr class="infoBoxContents">
<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
<td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<?php else: ?>
<td width="100%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
<td class="pageHeading" align="right"><?php echo tep_image(DIR_WS_IMAGES . 'table_background_specials.gif', HEADING_TITLE, HEADING_IMAGE_WIDTH, HEADING_IMAGE_HEIGHT); ?></td>
</tr>
</table></td>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
</tr>
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td class="main"><?php echo TEXT_INFORMATION; ?></td>
</tr>
<?php if (EM_SHOW_MAP_LINES == 'true') { ?>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
</tr>
<tr>
<td class="main"><?php echo TEXT_DRIVING_DIRECTIONS; ?></td>
</tr>
<?php } ?>
</table></td>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td>
</tr>
<!-- Start map code //-->
<tr>
<td>
<!-- EOC googlemap //-->
<div id="map" style="width: 500px; height: 400px; border: .2em; border-style: ridge; "></div>
<div id="message"></div>
</td>
</tr>
<!-- BEGIN FORM -->
<tr>
<td align="right"><?php echo tep_draw_form('seotips', tep_href_link(FILENAME_EASYMAP, '', 'NONSSL'), 'post', 'onSubmit="return true;" onReset="return true"') . tep_draw_hidden_field('getdirections', 'true'); ?></td> </tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '20'); ?></td>
</tr>
<tr>
<td width="40%"><table border="1">
<tr>
<td>Starting Address</td>
<td><?php echo tep_draw_input_field('fromAddress', $fromAddress, false); ?> </td>
</tr>
</table></td>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '20'); ?></td>
</tr>
<tr>
<td width="40%"><table border="0">
<tr>
<td width="45%"> </td>
<td><?php echo (tep_image_submit('button_update.gif', IMAGE_UPDATE) ) . ' <a href="' . tep_href_link(FILENAME_EASYMAP, '') .'">' . '</a>'; ?></td>
</tr>
</table></td>
</tr>
<tr>
<td><?php echo tep_draw_separator('pixel_trans.gif', '10', '20'); ?></td>
</tr>
</form>
<!-- END FORM -->
<!-- End Map code //-->
<tr>
<td><table border="0" width="100%" cellspacing="1" cellpadding="2" class="infoBox">
<tr class="infoBoxContents">
<td><table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr>
<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
<td align="right"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?></td>
<td width="10"><?php echo tep_draw_separator('pixel_trans.gif', '10', '1'); ?></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td class="columnRight"><?php echo tep_draw_separator('pixel_trans.gif', COLUMN_SPACER_WIDTH, '1'); ?></td>
<td > </td>
<?php endif; ?>
<!-- body_text_eof //-->
<td width="<?php echo COLUMN_RIGHT_WIDTH; ?>" valign="top"><table border="0" width="<?php echo COLUMN_RIGHT_WIDTH; ?>" cellspacing="0" cellpadding="2">
<!-- right_navigation //-->
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
</table></td>
</tr>
</table>
<!-- body_eof //-->
<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->
<br>
</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>
If you want to play around with it just overwrite your existing easymap.php file with it and give it a go. It's pretty basic right now but you should be able to modify it. Remember to put your own API key in place.
