Source Code Google Maps API [Latihan-10]

Posted: December 7, 2010 in Google Maps Dev
<html> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>latihan-10</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()"> 
 	<table border=0> 
      <tr> 
        <td> 
           <div id="map" style="width: 550px; height: 450px"></div>  
        </td> 
        <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div>
           <div id="minimap" style="height: 190px"></div>  
           <div id="info"></div>  
        </td> 
      </tr> 
    </table> 
    
    <noscript><b>Javascriptnya kudu Enable, ni mo buka Google Maps rek....</noscript> 
    <script type="text/javascript">  
	
	 var side_bar_html = ""; 
     var gmarkers = [];
	  
	 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");
	  
	  var icon_hand = new GIcon();
      icon_hand.image = "xhair.png";
      icon_hand.iconSize = new GSize(21, 21);
      icon_hand.shadowSize = new GSize(0,0);
      icon_hand.iconAnchor = new GPoint(11, 11);
      icon_hand.infoWindowAnchor = new GPoint(11, 11);
      icon_hand.infoShadowAnchor = new GPoint(11, 11);
	
	function tabmarker(point,htmls,title) {
        var marker = new GMarker(point,{icon:ico_jin,title:title});
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(htmls);
        });
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("icon_jinx.png");
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("icon_jin.png");
        });
		
		gmarkers.push(marker); 
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')" border="0" >' + title + '<\/a><br>';
        return marker;
		 
      }
	  
	  function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }
    
    if (GBrowserIsCompatible()) {  
      
	   	  var minimap = new GMap2(document.getElementById("minimap"));
		  minimap.setCenter(new GLatLng(-4.039618,114.65332), 3); 
		  var xhair = new GMarker(minimap.getCenter(), icon_hand);            
		  minimap.addOverlay(xhair); 
		
		  var map_moving = 0;
		  var minimap_moving = 0; 
		  
		  function Move(){
			minimap_moving = true;
			if (map_moving == false) {
			  minimap.setCenter(map.getCenter());
			  xhair.setPoint(map.getCenter());
			  xhair.redraw(true);
			}
			minimap_moving = false;
		  } 
		  
		  function MMove(){
			map_moving = true;
			if (minimap_moving == false) {
			  map.setCenter(minimap.getCenter());
			  xhair.setPoint(minimap.getCenter());
			  xhair.redraw(true);
			}
			map_moving = false;
		  }
		  
		   
		  GEvent.addListener(map, 'move', Move);
		  GEvent.addListener(minimap, 'moveend', MMove);
	  
	  var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(-4.039618,114.65332),4); 
	  
	   GDownloadUrl("info.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
        for (var i = 0; i < markers.length; i++) { 
			  var lat = parseFloat(markers[i].getAttribute("lat"));
			  var lng = parseFloat(markers[i].getAttribute("lng"));
			  var point = new GLatLng(lat,lng);
			  var html = markers[i].getAttribute("html"); 
			  var title = markers[i].getAttribute("title"); 
			  
			  var marker = tabmarker(point,html,title);
			  map.addOverlay(marker);
			} 
			document.getElementById("side_bar").innerHTML = side_bar_html;
	  
			// ========= membuat Polyline dari XML file ===========
			  var lines = xmlDoc.documentElement.getElementsByTagName("line"); 
				  for (var a = 0; a < lines.length; a++) { 
					//Warna Garis
					var colour = "#FF0000";
					//lebar Garis
					var width  = 4; 
					var points = lines[a].getElementsByTagName("point");
					var pts = [];
					for (var i = 0; i < points.length; i++) {
					   pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),parseFloat(points[i].getAttribute("lng")));
					}
					map.addOverlay(new GPolyline(pts,colour,width));
				  }
			}); 
          // ================================================ 
	    
	  	var myListener = GEvent.bind(map,'click',this, function(overlay, point){  
			if(point){
				var marker = new GMarker(point, {icon:ico_jin, draggable: true});
				map.addOverlay(marker); 
				document.getElementById("info").innerHTML = "Informasi Latitude-Longitude : "+point;
			}  
		});   
 
    } 
    else {
      alert("Sepurane rek.., Google Maps tidak bisa dibuka dengan browser ini");
    } 
    </script> 
  </body>  
</html> 

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