  | 
		 		   | 
	  	    
          
            
			
	
			
			 
                Code (JavaScript) 
<script type="text/javascript"> 
//<![CDATA[
    var map;
    var container;
    var zoom = 6;
    <%=this.CenterPoint %>
    //var centerPoint = new GLatLng(12.765599, 100.957053);
    var icons = Array();
    var baseMarker;
    var myPoints = Array(); // Array of GLatLng objects
    var myPointsTemp = Array(); // Array of GLatLng objects
    function load() {
        if (GBrowserIsCompatible()) {
            container = document.getElementById("mapDiv");
            map = new GMap2(container, { draggableCursor: "crosshair" });
            map.setCenter(centerPoint, zoom);
            map.addControl(new GScaleControl());
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.enableScrollWheelZoom();
            var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(0, -80));
            map.addControl(new MStatusControl({ position: pos }));
            // Define the base
           baseMarker = new GMarker(centerPoint, { draggable: true });
          //<%=this.BaseMarker %>
            addMarkers();
        }
    }
    function addMarkers() {
        myPoints = Array(); // Array of GLatLng objects
        map.clearOverlays();
        map.addOverlay(baseMarker)
        var bounds = map.getBounds();
        <%=MyPlace%>
            
        createIcons();
        myPointsTemp = Array();
        for (var n = 0; n < myPoints.length; n++) {
            myPointsTemp.push(myPoints[n]);
        }
        plotMarkers();
    }
    
    function plotMarkers() {
        var p = myPointsTemp.shift();
        var marker = new GMarker(p, { icon: icons.shift() })
        GEvent.addListener(marker, 'click', function () {
            var html = 'Distance to base: ' + (marker.getLatLng().distanceFrom(baseMarker.getLatLng()) / 1609).toFixed(2) + ' Miles';
            marker.openInfoWindowHtml(html)
        });
        map.addOverlay(marker)
        if (myPointsTemp.length) {
            window.setTimeout("plotMarkers()", 10);
        }
    }
    this.distanceArray_Count=0;
    this.distanceArray=new Array();
    // Magic function ;-)
    function compareDistance(LatLonA, LatLonB) {
        var d=baseMarker.getLatLng().distanceFrom(LatLonA) - baseMarker.getLatLng().distanceFrom(LatLonB);
       // this.distanceArray[ this.distanceArray_Count++]=d;
        return d;
    }
    function sort() {
        directionsPanel = document.getElementById("route");
        //alert(directionsPanel);
        myPoints.sort(compareDistance);
        //alert(this.distanceArray_Count);
        var latlonDistance='';
          var latlon='';
        for (var n = 0; n < myPoints.length; n++) {
            if(n+1<=myPoints.length-1){
                
                var lat1=myPoints[n].y;
                var lon1=myPoints[n].x;
                var lat2=myPoints[n+1].y;
                var lon2=myPoints[n+1].x;
                var R = 6371; // km
                var dLat = (lat2-lat1).toRad();
                var dLon = (lon2-lon1).toRad(); 
                var a = Math.sin(dLat/2) * Math.sin(dLat/2) +        
                        Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *         
                        Math.sin(dLon/2) * Math.sin(dLon/2); 
                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
                var d = R * c;
              
                this.distanceArray[ this.distanceArray_Count++]=d;
                latlonDistance+=','+d;
                
            }
            latlon+=','+myPoints[n].y+"-"+myPoints[n].x;
        }
        cbpCalculateTime.PerformCallback(latlonDistance+'/'+latlon);
        map.clearOverlays();
        map.addOverlay(baseMarker)
        directions = new GDirections(map, directionsPanel);
        //alert(directions);
        createIcons();
        myPointsTemp = Array();
        var fromTo = '';
        for (var n = 0; n < myPoints.length; n++) {
            myPointsTemp.push(myPoints[n]);
            //alert(myPoints[n].lat.value);
            if (n == 0) {
                fromTo = 'from: ' + myPoints[n].y + ', ' + myPoints[n].x + ' to: ' + myPoints[n + 1].y + ', ' + myPoints[n + 1].x + ' ';
                //alert(fromTo);
            } else if (n + 1 <= myPoints.length - 1) {
                fromTo += ' to: ' + myPoints[n + 1].y + ', ' + myPoints[n + 1].x + ' ';
            }
        }
        directions.load(fromTo, { locale: 'th' });
        //directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606 ", { locale: 'th' });
        //plotMarkers();
    }
    createIcons = function () {
        var baseIcon = new GIcon();
        baseIcon.iconSize = new GSize(20, 34);
        baseIcon.iconAnchor = new GPoint(10, 34);
        baseIcon.infoWindowAnchor = new GPoint(10, 0);
        icons = Array();
        for (var n = 65; n < 91; n++) {
            var icon = (new GIcon(baseIcon, 'http://www.google.com/intl/en_ALL/mapfiles/marker_green' + String.fromCharCode(n) + '.png', null, ""));
            icons.push(icon);
        }
    }
    function unload() {
        GUnload();
    }
 
 
 
//]]>
 
</script>
 
 
  Tag : JavaScript               
                        | 
           
          
            | 
			
                             | 
           
          
            
              
                   | 
                   | 
                   | 
               
              
                   | 
                
                    
                      | Date :
                          2011-04-04 20:27:54 | 
                      By :
                          หมูแดง | 
                      View :
                          1654 | 
                      Reply :
                          2 | 
                     
                  | 
                   | 
               
              
                   | 
                   | 
                   | 
               
              | 
           
          
            | 
			 | 
           
         
	    
		             | 
		
			  |