<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=pl"></script>
<script type="text/javascript">
//<![CDATA[
var side_bar_html = "";
var gmarkers = [];
var map = null;
var startLocation = null;
var endLocation = null;
function initialize() {
var center = new google.maps.LatLng(24.7756,121.0062);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: center,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var directionsService = new google.maps.DirectionsService();
var request = {
origin: "Warszawa, Maczka",
destination: "Warszawa, Ciołka",
travelMode: google.maps.DirectionsTravelMode.WALKING
};
var polyline = new google.maps.Polyline({
path: [],
strokeColor: '#FF0000',
strokeWeight: 3
});
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var bounds = new google.maps.LatLngBounds();
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
var detailsPanel = document.getElementById("direction_details");
startLocation = new Object();
endLocation = new Object();
summaryPanel.innerHTML = "";
detailsPanel.innerHTML = '<ul>';
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += "<b>Plan trasy: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += route.legs[i].start_address + " do ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
}
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i=0;i<legs.length;i++) {
if (i == 0) {
startLocation.latlng = legs[i].start_location;
startLocation.address = legs[i].start_address;
createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
}
endLocation.latlng = legs[i].end_location;
endLocation.address = legs[i].end_address;
var steps = legs[i].steps;
for (j=0;j<steps.length;j++) {
var nextSegment = steps[j].path;
detailsPanel.innerHTML += "<li>"+steps[j].instructions;
var dist_dur = "";
if (steps[j].distance && steps[j].distance.text) dist_dur += " "+steps[j].distance.text;
if (steps[j].duration && steps[j].duration.text) dist_dur += " "+steps[j].duration.text;
if (dist_dur != "") {
detailsPanel.innerHTML += "("+dist_dur+")<br /></li>";
} else {
detailsPanel.innerHTML += "</li>";
}
for (k=0;k<nextSegment.length;k++) {
polyline.getPath().push(nextSegment[k]);
bounds.extend(nextSegment[k]);
}
}
}
detailsPanel.innerHTML += "</ul>"
polyline.setMap(map);
map.fitBounds(bounds);
createMarker(endLocation.latlng,"end",endLocation.address,"red");
// == create the initial sidebar ==
makeSidebar();
}
});
}
icons["red"] = new google.maps.MarkerImage("http://wafao.com/taxometr/postoj.png",
new google.maps.Size(28, 31),
new google.maps.Point(0,0),
new google.maps.Point(28, 31));
function getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) {
iconColor = "red";
}
if (!icons[iconColor]) {
icons[iconColor] = new google.maps.MarkerImage("http://wafao.com/taxometr/taxi.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(48, 31),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
new google.maps.Point(22, 20));
}
return icons[iconColor];
}
var iconImage = new google.maps.MarkerImage('http://wafao.com/taxometr/taxi.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(48, 31),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://wafao.com/taxometr/taxi.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(37, 34));
var iconShape = {
coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
type: 'poly'
};
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
function createMarker(latlng, label, html, color) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
var contentString = '<b>'+label+'</b><br>'+html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
// shadow: iconShadow,
icon: getMarkerImage(color),
shape: iconShape,
title: label,
zIndex
: Math
.round(latlng
.lat
()*-100000
)<<5
});
marker.myname = label;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
//]]>
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<table border="1"><tr><td>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</td></tr><tr><td>
<div id="direction_details" style="margin:20px;"></div>
</td></tr></table>
</div>
<br/><br/>
<form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">
<small><b>Zalecana forma wprowadzonego adresu:</b> Gdynia, Podgorska 22<br/><br/>
<table>
<tr>
<td>
<th align="right">Wyjazd z: </th>
</td>
<td>
<input type="text" size="55" id="fromAddress" name="from" value=""/>
</td>
</tr>
<tr>
<td>
<th align="right"> Adres docelowy: </th>
</td>
<td>
<input type="text" size="55" id="toAddress" name="to" value="" />
</td>
</tr>
<tr>
<td colspan="3"><input type ="hidden" id="locale" name="locale" value="pl">
<input name="submit" type="submit" value="Pokaż trasę" />
</td></tr>
</table>
</form>
