Source Code Google Maps API [Latihan-2]

Posted: December 7, 2010 in Google Maps Dev
<html> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>latihan-2</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: 550px; height: 450px"></div>  
    <noscript><b>Javascriptnya kudu Enable, ni mo buka Google Maps rek....</noscript> 
    <script type="text/javascript">  
	
	 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 ico1 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon40.png", null, "http://maps.google.com/mapfiles/kml/pal4/icon40s.png");
      var ico2 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon41.png", null, "http://maps.google.com/mapfiles/kml/pal4/icon41s.png");
      var ico3 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon42.png", null, "http://maps.google.com/mapfiles/kml/pal4/icon42s.png");
      var ico4 = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon43.png", null, "http://maps.google.com/mapfiles/kml/pal4/icon43s.png");
      var ico_jin = new GIcon(baseIcon, "icon_jin.png", null, "icon_jins.png");
	
	function createMarker(point,html,icon) {
        var marker = new GMarker(point,icon);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
    }
    
    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); 
	  
	  var point = new GLatLng(-7.231699,112.368164);
      var marker = createMarker(point,'Marker WIndow 1, dari icon yang anda klik',ico1)
      map.addOverlay(marker);
 
      var point = new GLatLng(-6.489983,107.138672);
      var marker = createMarker(point,'Marker WIndow 2, dari icon yang anda klik',ico2)
      map.addOverlay(marker); 
 
      var point = new GLatLng(-0.747049,113.862305);
      var marker = createMarker(point,'Marker WIndow 3, dari icon yang anda klik',ico3)
      map.addOverlay(marker);
 
      var point = new GLatLng(-3.294082,126.870117);
      var marker = createMarker(point,'Marker WIndow 4, dari icon yang anda klik',ico4)
      map.addOverlay(marker);
	  
	  var point = new GLatLng(-1.45004,101.953125);
      var marker = createMarker(point,'Menampilkan Info Marker JIN😀 , dari icon yang anda klik',ico_jin)
      map.addOverlay(marker);
 
    } 
    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