Source Code Google Maps API [Latihan-11]

Posted: December 7, 2010 in Google Maps Dev
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Membuat Route Antar Point</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: 800px; height: 600px; float:left;"></div>  
<div id="info" style="width: 400px; height: 600px; overflow:auto;"></div>  
<noscript><b>Javascriptnya kudu Enable, ni mo buka Google Maps rek....</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(-7.159828,112.650976),12);  
		  
		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("Sepurane rek.., Google Maps tidak bisa dibuka dengan browser ini");
    } 
    </script> 
</body>
</html>

Comments
  1. dhaytechno says:

    Om Jin, mo tanya… semisalnya saya pengen wilayah yang pertama kali diload itu adalah daerah jogja, untuk mengetahui key atau koordinatenya gimana? maaf newbie…😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s