hi all,

sorry for bad eng..

this draw polyline on g map and then fetch details from php;
my prob is that when user draw a point , distance from that point should be display in miles to another point when his mouse drag to another point.


any help or idea appre...

thnx

<script type="text/javascript">
		
        var map, polygon;
        var geocoder;
        var polyPointsCityArr = new Array();
        // var allClickedCityArr = new Array();
        function initializeMap(){
            if (GBrowserIsCompatible()) {
                // initialize the map
                map = new GMap2(document.getElementById("canvas"));
                map.addControl(new GSmallMapControl());
                map.enableScrollWheelZoom();
		  
                map.setCenter(new GLatLng(42.428549, -71.06059), 14);
		  
                geocoder = new GClientGeocoder();
                

                GEvent.addListener(map, "zoomend", function() {
                    zoomChanged();
                });

                GEvent.addListener(map, "click", function(overlay, latlng){
                  
                    if(latlng){
                        //to get the address from lat long.. reversegeocoding...
                        geocoder.getLocations(latlng, getCity);
                    }
                }
													
            );
          }
        }
        //function InitDistances(latlng) {
            //alert("dfd".latlng);
           // var startLocation = new GLatLng(startLat, startLon);
            //var endLocation = new GLatLng(endLat, endLon);
            //var dist = startLocation .distanceFrom(endLocation);

             //Convert distance to miles with two decimal points precision
            //return (dist / 1609.344).toFixed(2);
        //}

        
        function getCity(response){
            
            if (!response || response.Status.code != 200) {
                alert("Status Code:" + response.Status.code);
            } else {
                place = response.Placemark[0];
                
                if (place.address) {
                    // alert(place.address);
                    var arr = place.address.split(",");
                    if(arr){
                        polyPointsCityArr.push(arr[1]);
                    }
                }
            }
        }
        //////// to get the address of particualr point .. give lantlong, it will return address ////////////////////////
	
	 
        //////////////////////////////////////////////////////////////////////////////////////////////////
		
    
        function drawASearch(){
            //$('draw_button').src="./images/clear_search.png";
            //$('#draw_button').attributes['onclick'].value = "resetMap()";
            enableDrawing();
            
        }
	
        function resetMap(){
            //$('draw_button').src="./image/new_area.png";
            //$('draw_button').attributes['onclick'].value  ="drawASearch()";
            map.clearOverlays();
            polyPointsCityArr.length=0;
            enableDrawing();
            document.getElementById('WAIT').style.display="none";
                
        }
	
	
        ////////////////////////////////// To draw a polygon //////////////////////////////////////////////////////
        function enableDrawing() {
		  
            polygon && map.removeOverlay(polygon);

            // add a polygon to the map with no vertices
            polygon = new GPolygon([], "#0000FF", 2, 1.0, "#0000FF", 0.5);
            map.addOverlay(polygon);

            // register a listener for "endline" event and enable drawing
            GEvent.addListener(polygon, "endline", polygonCheckFunc);
            polygon.enableDrawing();
            //getAddressByLatLong(event.latLng);
		
        }
        function polygonCheckFunc(){
            // alert(polyPointsCityArr);
            /*  var uniqueCityArr = removeDuplicateElement(polyPointsCityArr);
                  var finalArr = new Array();
                  if(allClickedCityArr.length>0){
                          for(var i=0;i<uniqueCityArr.length;i++){
                                if(!allClickedCityArr.inArray(uniqueCityArr[i])){
                                        finalArr.push(uniqueCityArr[i]);
                                }
                          }
                  }else{
                           allClickedCityArr =  uniqueCityArr;
                           finalArr = uniqueCityArr;
                        }
                  alert(finalArr);
                  var mergeArr = allClickedCityArr.concat(uniqueCityArr);
                  allClickedCityArr = removeDuplicateElement(mergeArr);*/
            /*		  for(var i=0;i<uniqueCityArr.length;i++){
                        cityArr.push(uniqueCityArr[i]);
                  }
             */
            //alert(allClickedCityArr);
            getAllListingsByCity(polyPointsCityArr);
        }
	
        function getAllListingsByCity(cityArr){
            var postData = "";
            //alert(cityArr);
            for(var i=0;i<cityArr.length;i++){
                postData += "&cityArr["+i+"]="+cityArr[i];
            }
		
            document.getElementById("WT").style.left = (screen.availWidth/2 - (300/2))+"px";
            document.getElementById("WT").style.top = ((screen.availHeight/2)-50)+"px";
            document.getElementById("WA").style.display = '';
            document.getElementById("CO").style.display = '';
            document.getElementById("CO").style.height = screen.availHeight+'px';

            var url = "ppgloab.php?view=search&act=getLatLong";
            new Ajax.Request(url,{
                method:"post",
                postBody: postData,
                onComplete: function(transport){
                    //alert(transport.responseText);
                    if(transport.status == 200){
                        alert(transport.responseText);
                        var response =  transport.responseText.evalJSON();
					
                        var responseData = response;
                        //alert(response.latlng.length);
                        //alert(responseDatea);
                        document.getElementById("WAIT").style.display = 'none';
                        document.getElementById("COVER").style.display = 'none';
                        placeListingMarkers(responseData);
                        //alert(responseData.latlng.length);
                    }else{
                        document.getElementById("WAIT").style.display = 'none';
                        document.getElementById("COVER").style.display = 'none';
                        alert("There is a problem while loading properties.");
					
                    }
                }
            });
        }
        /*function  stop_request()
        {
        
            Event.observe('stp', 'click', function(event) {
                //var login = $F('login').strip();
                 Event.stop(event);

            });

        }*/
                                             
        function placeListingMarkers(responseData){
            for(var i=0;i<responseData.listingData.length;i++){
                (function () { /* ################################################## */
                    var lat = responseData.listingData[i][0];
                    var long = responseData.listingData[i][1];
                    var address = responseData.listingData[i][2];
                    var propertyType = responseData.listingData[i][3];
                    var beds = responseData.listingData[i][4];
                    var baths = responseData.listingData[i][5];
                    var photo_url = responseData.listingData[i][6];
                    var listPrice = responseData.listingData[i][7];
                    var pid = responseData.listingData[i][8];
					
                    var latlng = new GLatLng(lat,long);
					
                    if(polygon.containsLatLng(latlng)){
                        if(beds!=null && baths!=null){
                            var contentString = "<table><tr><td><img src='"+photo_url+"' width='100px' height='90px' /></td><td valign='top' style='padding:5px; font-family:Verdana, Geneva, sans-serif; font-size:10px'><strong>"+propertyType+"</strong><br><br>"+beds+" Beds | "+baths+" Baths<br>$ "+listPrice+"<br>"+address+"</td></tr><tr><td><a href='index.php?view=property_listing_detail&property_id="+pid+"' style='text-decoration:underline; font-family:Verdana, Geneva, sans-serif; font-size:10px' target='_blank'>Details</a></td></tr></table>";
                        }else{
                            var contentString = "<table><tr><td><img src='"+photo_url+"' width='100px' height='90px' /></td><td valign='top' style='padding:5px; font-family:Verdana, Geneva, sans-serif; font-size:10px'><strong>"+propertyType+"</strong><br>$ "+listPrice+"<br>"+address+"</td></tr><tr><td><a href='index.php?view=property_listing_detail&property_id="+pid+"' style='text-decoration:underline; font-family:Verdana, Geneva, sans-serif; font-size:10px' target='_blank'>Details</a></td></tr></table>";
                        }
                        var cust_icon = new GIcon(G_DEFAULT_ICON);
                        cust_icon.image = "images/home.png";
                        // Set up our GMarkerOptions object
                        markerOptions = { icon:cust_icon};

                        var marker = new GMarker(latlng, markerOptions);

                        GEvent.addListener(marker, "click", function() {
                            map.closeInfoWindow();
                            marker.openInfoWindowHtml(contentString);
                        });
						
																	
                        map.addOverlay(marker);
                    }
                })();
            }
            if(emptyProp){
                alert("No property found");
            }
        }
        function getCurrentZoom() {
            return map.getZoom();
        }
 
        function zoomChanged() {
 		
            var levelZoom = getCurrentZoom();
		
            if(levelZoom <= 14){
                //alert('Zoom Changed : '+levelZoom);
                alert('You can not zoom out beyond this level for Draw Your Search Area.');
                map.setZoom(14);
                return false;
            }else{
                //alert('Zoom Changed : '+levelZoom);
                return true;
            }
        }

        
    </script>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.