Source Code Google Maps API [Latihan-6]

Posted: December 7, 2010 in Google Maps Dev
<html> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>latihan-6</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> 
        </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");
	
	function tabmarker(point,htmls,title) {
        var marker = new GMarker(point,ico_jin);
        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 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;
      }); 
 
    } 
    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