<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Displaying text directions with <code>setPanel()</code></title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<style>
#directions-panel {
height: 100%;
float: right;
width: 390px;
overflow: auto;
}
#map-canvas {
margin-right: 400px;
}
#control {
background: #fff;
padding: 5px;
font-size: 14px;
font-family: Arial;
border: 1px solid #ccc;
box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
display: none;
}
@media print {
#map-canvas {
height: 500px;
margin: 0;
}
#directions-panel {
float: none;
width: auto;
}
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var yogyakarta = new google.maps.LatLng(-7.78291666666667,110.367027777778);
var mapOptions = {
zoom:10,
center: yogyakarta
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="control">
<strong>Start:</strong>
<select id="start" onchange="calcRoute();">
<option value="sleman">Sleman</option>
<option value="bantul">Bantul</option>
<option value="wonosari">Wonosari</option>
<option value="wates">Wates</option>
<option value="yogyakarta">Yogyakarta</option>
</select>
<strong>End:</strong>
<select id="end" onchange="calcRoute();">
<option value="sleman">Sleman</option>
<option value="bantul">Bantul</option>
<option value="wonosari">Wonosari</option>
<option value="wates">Wates</option>
<option value="yogyakarta">Yogyakarta</option>
</select>
</div>
<div id="directions-panel"></div>
<div id="map-canvas"></div>
</body>
</html>
Note :
- Untuk mengganti lokasi extent peta, silahkan ganti koordinat lokasi yang berwarna biru.
- Level zoom juga dapat disesuaikan dengan kebutuhan, silahkan ganti code yang berwarna ungu.
- Lokasi keberangkatan dan tunjuan juga dapat ditentukan dengan mengganti code berwarna orange.
- Travel mode juga dapat dimodifikasi menjadi BICYCLING, WALKING, atau TRANSIT. Silahkan ganti code yang diblok hijau untuk menyesuaikannya.
- Bagian panel juga dapat dimodifikasi menggunakan code CSS maupun script html. Silahkan eksplore lagi seperti penggantian backgroud, ukuran panel, warna, maupun posisinya.
- Selamat mencoba!!
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon