and map.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Location</title>
<style type="text/css">
* {
padding:0px;
margin:0px;
font-family:Tahoma, "MS Sans Serif", Arial;
font-size:10pt;
color:#4B4B4B;
}
body {
text-align:center;
background-image: url(../images/main3.gif);
}
#main-wrapper {
text-align:left;
margin:auto;
margin-top:20px;
background-color:#EEEEEE;
border-bottom:2px solid #4B4B4B;
border-right:2px solid #4B4B4B;
}
#main-padding {
padding:10px;
}
.footer-fix {
height:20px;
}
#menu {
text-align:center;
margin-top:20px;
}
#content {
margin-top:20px;
}
a {
color:#4B4B4B;
}
a:hover {
color:#999999;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14pt;
margin-bottom:15px;
}
h2 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10pt;
margin-bottom:15px;
}
.inline-image {
vertical-align:middle;
}
#map_canvas {
height:400px;
margin-top:15px;
}
#directions {
margin-top:10px;
}
.form {
margin:0px;
padding:0px;
margin-top:20px;
}
.form-field {
vertical-align:middle;
border:1px solid #999999;
background-color:#EEEEEE;
}
.form-submit {
font-family:Georgia, "Times New Roman", Times, serif;
border:1px solid #999999;
background-color:#EEEEEE;
font-size:7pt;
font-weight:bold;
}
#main-wrapper #main-padding #bannerdiv {
width: 132px;
}
#main-wrapper #main-padding #headertextdiv {
width: 570px;
float: left;
}
#main-wrapper #main-padding #seperator {
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
margin: 7px;
}
#bannerAddress {
float: right;
width: 200px;
}
#bannerLogo {
width: 350px;
float: left;
}
</style>
<script src= "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAdA4ZLF08TmtqXsfo3vcm-RRSyl0hd6igw9FlWe_okPncpDjMAxTMfXjXVk8ZdRQGJ0-LqUq4mC7tLw" type="text/javascript"> </script>
<script type="text/javascript">
var error_address_empty = 'Please enter a valid address first.';
var error_invalid_address = 'This address is invalid. Make sure to enter your street number and city as well?';
var error_google_error = 'There was a problem processing your request, please try again.';
var error_no_map_info = 'Sorry! Map information is not available for this address.';
var default_address = 'Korte Leidsedwarsstraat 119, amsterdam, 1017 PZ ';
var current_address = null; /* Current address we are displaying, we save it here for directions */
var map = null; /* Instance of Google Maps object */
var geocoder = null; /* Instance of Google Deocoder object */
var gdir = null; /* Instance of Google Directions object */
var map_compatible = false; /* Whether or not user's browser is compatible to show the map */
if( GBrowserIsCompatible() ) {
map_compatible = true;
}
function initialize_map() {
if( map_compatible ) {
map = new GMap2(document.getElementById('map_canvas'));
geocoder = new GClientGeocoder();
show_address(default_address);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
}
}
function show_address(address) {
if( map_compatible && geocoder ) {
current_address = address;
geocoder.getLatLng(
address,
function( point ) {
if( !point ) {
alert(error_no_map_info);
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
return false;
}
function get_directions() {
if( map_compatible ) {
if( document.direction_form.from_address.value == '' ) {
alert(error_address_empty);
return false;
}
document.getElementById('directions').innerHTML = '';
gdir = new GDirections(map, document.getElementById('directions'));
GEvent.addListener(gdir, 'load', onGDirectionsLoad);
GEvent.addListener(gdir, 'error', handleErrors);
set_directions(document.direction_form.from_address.value, current_address);
}
return false;
}
function set_directions(fromAddress, toAddress) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": "en" });
}
function handleErrors(){
if( gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS )
alert(error_invalid_address);
else if( gdir.getStatus().code == G_GEO_SERVER_ERROR )
alert(error_google_error);
else if( gdir.getStatus().code == G_GEO_MISSING_QUERY )
alert(error_address_empty);
else
alert(error_invalid_address);
}
function onGDirectionsLoad(){
setTimeout('eval(\'window.location = "#directions_table"\;\')', 500);
}
</script>
</head>
<body onLoad="initialize_map();">
<div id="main-wrapper">
<div id="main-padding">
<div id="seperator"></div>
<table width="100%" height="94">
<tr valign="top">
<td width="33%" colspan="3">
<div id="headertextdiv">
<div id="bannerLogo">
<h1>Tong-Ah</h1>
<h2>Chinese-Indonesia Restaurant<br />
1017 PZ | Amsterdam<br />
[email protected]</h2>
</div>
<div id="bannerAddress">
<p><strong>ADDRESS</strong><br />
Korte Leidsedwarsstraat 119<br>
1017 PZ Amsterdam<br>
Tel- 020 6234829?
Fax- 020 3205483? <br />
<a href="#" onClick="return show_address('Korte Leidsedwarsstraat 119
, Amsterdam, 1017 PZ');">Map it!</a>
</p>
</div>
</div>
<div align="center"></div></td>
</tr>
</table>
<div id="seperator"></div>
<div id="map_canvas"></div>
<form name="direction_form" onSubmit="get_directions(); return false;" class="form">
Enter Your location below : <input type="text" name="from_address" class="form-field" /><br /><br />
<input type="submit" value=" View Directions " class="form-submit" />
</form>
<a name="directions_table"></a>
<div id="directions"></div>
<a href="http://www.tongah.nl" target="_blank">Back to Tong-Ah</a><br />
</div>
</div>
<div class="footer-fix"> </div>
</body>
</html>
