disini saya akan membuat tutorial tentang pembuatan webgis jalan terdekat dengan gmap, tutorial ini berfungsi untuk mencari jalan terdekat untuk sampai ke tujuan dari tempat awal dengan menggunakan gmap. pertama buat file index.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Membuat Jalan tercepat gmap</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&
key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"
type="text/javascript"></script>
</head>
<body onUnload="GUnload()">
<div id="map" style="width: 1200px; height: 1000px; float:left;"></div>
<div id="info" style="width: 400px; height: 600px; overflow:auto;"></div>
<noscript><b>Javascriptnya harus enable</noscript>
<script type="text/javascript">
var numb =1;
var points = [];
var baseIcon = new GIcon();
baseIcon.iconSize=new GSize(32,32);
baseIcon.shadowSize=new GSize(56,32);
baseIcon.iconAnchor=new GPoint(16,32);
baseIcon.infoWindowAnchor=new GPoint(16,0);
var ico_jin = new GIcon(baseIcon, "icon_jin.png", null, "icon_jins.png");
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-6.493906,106.472840),15);
var myListener = GEvent.bind(map,'click',this, function(overlay, point){
if(point){
if(numb <= 2){
var marker = new GMarker(point, {icon:ico_jin, draggable: true});
map.addOverlay(marker);
document.getElementById("info").innerHTML += "Informasi Latitude-Longitude : </br>"+point+"</br>";
points[numb] = point;
numb++;
if(numb == 3){
document.getElementById("info").innerHTML = "";
routing(points[1],points[2]);
numb = 1;
}
}
else{
document.getElementById("info").innerHTML = "";
}
}
function routing(point1,point2){
var start_point = point1;
var end_point = point2;
var directionsPanel = document.getElementById("info");
var directions = new GDirections(map, directionsPanel);
var locale = "ID";
directions.load("from: "+start_point+" to:"+end_point,{ "locale": locale });
}
});
}
else {
alert("your web browser not support");
}
</script>
</body>
</html>
maka hasil yang didapatkan akan seperti gambar dibawah ini :
Terima kasih untuk sharing source codenya sangat bermanfaat dan berguna untuk membuat dan mengembangkan web GIS.
ReplyDeletesilahkan mengunjungi websita saya di: https://leor.mahasiswa.atmaluhur.ac.id/
dan website kampus saya di: http://www.atmaluhur.ac.id/