Share For You: March 2013

Friday, March 29, 2013

Membuat peta jalan terdekat dengan webgis

Filled under: gis , php , webgis

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

<html>

<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&amp;v=2&amp;sensor=false&amp;

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 :